在 Android 上反应原生 flexbox 问题答案

【问题标题】：react native flexbox issue on Android在 Android 上反应原生 flexbox 问题
【发布时间】：2017-07-02 18:14:57
【问题描述】：

概述我已经尝试在 android 上使用 flex box 一个小时了，但似乎无法让它工作。因此，我从 react-native 站点获取了一个简单的 sn-p 来演示我的问题。

主要问题

exampleContainer: { flex: 1 }

不会占安卓屏幕空间。

图片校样

代码片段

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

更新我通过为根节点 (./index..js) 赋予 flex 样式来解决此问题。

Solution and Picture

【问题讨论】：

标签： react-native flexbox react-native-android

【解决方案1】：

要让 react-native flex box 在 android 和 ios 上都能正常工作，您的根视图必须应用 flex 样式，以便直接子级知道有多少可用空间。

【讨论】：