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

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

Answer 3

尝试此代码：

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

Answer 4

尝试一下：

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>
  );
}

如何将我的视图设置为反应原生Android应用程序的屏幕上半部分？

4 个答案: