javascript - react native : Why don't flex justifyContent and alignItems work for child ?

Question

在 React Native 中，我在另一个 View 中有一个 subview ，但它不在页面中间。但是，如果 subview 不在父 View 内且单独存在，则它可以很好地居中在页面中间。

我怎样才能使 subview 在另一个 View (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 添加到您的父 View 。我为你做了一个工作示例: 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>
    );