我如何设置视图以获取屏幕的上半部分，以获取反应本式Android应用程序

Question

我想设置我的 <View>仅占据屏幕的上半部分。如果我在视图的样式上设置flex:1，则将全屏获取。请参阅下面的代码：

render(){
  return(
    <View style={{flex:1}}>
       ...
    </View>
  );
}

我试图将Flex值设置为0.5，但这无济于事。如何在Flexbox上设置一半的视图？

Answer 1

render(){
  return(
    <View style={{flex:1}}>
      <View style={{flex:.5}}>
       ...
      </View>
      <View style={{flex:.5}}/>
    </View>
  );
}

Answer 2

尝试以下代码：

<View style={{flex: 1,flexDirection:'row'}}>
    <View style={{flex: 2, backgroundColor: 'powderblue',height:100}} />
    <View style={{flex: 2, backgroundColor: 'skyblue',height:100}} />
</View>

Answer 3

尝试以下：

import {Dimensions, StyleSheet, View} from 'react-native';
const height = Dimensions.get('window').height*0.5;
const width = Dimensions.get('window').width;
const styles = StyleSheet.create({
   container: {
       width,
       height
   }
)};
render(){
  return(
    <View style={styles.container}>
       ...
    </View>
  );
}

Answer 4

另一种方法是您可以使用Dimensions API检查设备的高度，并将组件高度设置为一半，位置绝对位置：dimensions