React Native：为什么不灵活地将justifyContent和alignItems用于子<View />？

Question

在React Native中，我在另一个视图中有一个子视图，但是它不在页面中间。但是，如果子视图不在父视图之内并且单独存在，则它在页面中间居中。

如何使子视图位于另一个视图（parentView）内的同时居中于页面中间？

这是代码：

  render() {

    return (
      <View id="parentView">
          <View
            id="childView" 
            style={
               flex: 1,
               justifyContent: 'center',
               alignItems: 'center',
            }
          >
            <Text>Center This to Middle of Page</Text>
          </View>
          <View
            id="childViewTwo" 
          >
            <Text>Don't center me</Text>
          </View>
      </View>
    );
  }

Answer 1

只需添加flex:1到您的父视图。我为您制作了一个工作示例：https : //rnplay.org/apps/zHO1YA

return (
       <View id="parentView" style={{flex: 1}}>
          <View
            id="childView" 
            style={{
               flex: 1,
               justifyContent: 'center',
               alignItems: 'center',
            }}
          >
            <Text>Center This to Middle of Page</Text>
          </View>
          <View
            id="childViewTwo" 
          >
            <Text>Don't center me</Text>
          </View>
      </View>
    );