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

React Native：为什么不将flex justifyContent和alignItems用于子<view>？

1 个答案: