React Native flexDirection错误？

Question

我只是盯着反应原生并玩耍。所以我只尝试了flexDirection风格。

所以我从facebook-react复制了这个例子，看起来不错。

Code I testet and the websidet and the world app

enter code here
  <View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  }}>
    <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>

for flexDirection: 'row'在我的iPhone（expo App）上的外观相同。但如果我有机会column我的屏幕只是白色（View元素消失了？）。 接下来我试着设置justifyContent: 'center'之后我看起来像我追加的图像，超级wird，如果你在facebook页面测试它应该是obv居中......

这是一个错误吗？那里我的错误是什么？

这是最重要的事情......：

＆＃13;

＆＃13;

export default class App extends React.Component {
  render() {
    return (
      <NativeRouter>
        <View>
          <Route exact path='/'>
              <View style={{
                  flex: 1,
                  flexDirection: 'column',
                  justifyContent: '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>
          </Route>
        </View>
      </NativeRouter>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为如果您删除第一个View标记，它将正常工作。我在React本地网站上测试过。这是因为您的第一个视图不适合您的所有屏幕。您可以修改第一个View标记，或为其设置flex。

您也可以查看路线。

＆＃13;

＆＃13;

export default class App extends React.Component {
  render() {
    return (
      <NativeRouter>
        <View style={{
             flex: 1
         }}>
          <Route exact path='/'>
              <View style={{
                  flex: 1,
                  flexDirection: 'column',
                  justifyContent: '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>
          </Route>
        </View>
      </NativeRouter>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我通常遇到这个问题，你可能需要在父视图上添加一个flex:1，这样它就会在屏幕上显示，然后弹性方向应该看起来正确。