解决Android

Question

概述 我已经尝试在Android上使用flex box一小时了，似乎无法让它工作。所以我从react-native网站获取了一个简单的片段来演示我的问题。

主要问题

exampleContainer: { flex: 1 }

不会占用Android屏幕空间。

图片证明

ios vs Android

代码段

＆＃13;

＆＃13;

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      environment: props.environment,
      message: `Environment: ${props.environment}`
    }
  }

  static defaultProps() {
    return {environment: "Unknown"}
  }

  render(){
    return (
          // Try setting `alignItems` to 'flex-start'
          // Try setting `justifyContent` to `flex-end`.
          // Try setting `flexDirection` to `row`.
          <View style={{
            flex: 1,
            alignSelf: 'stretch',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
            <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
            <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
          </View>
        );
  }
}

＆＃13;

＆＃13;

＆＃13;

更新 我通过给根节点（./index..js）一个flex样式来解决这个问题。

Solution and Picture

Answer 1

要让react-native flex box适用于android和ios，你的根视图必须应用一个flex样式，以便直接的孩子知道有多少空间可用。