javascript - react native flexDirection错误？

我只是盯着反应本地人，玩周围。所以我只是尝试了flexDirection样式。

因此，我从facebook-react复制了该示例，它看起来不错。

Code I testet和网络端以及Expo应用程序中

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>

在我的iPhone（expo应用程序）上看起来与flexDirection: 'row'相同。但是，如果有机会进入column，我的屏幕只是白色（视图元素消失了？）。
我尝试的下一件事是在我完成此操作后将其设置为justifyContent: 'center'，它看起来像是我附加的图像，超级棒，如果在Facebook页面上对其进行测试，则应居中...



那是一个错误吗？我那是什么错

这是漏洞...

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

最佳答案

我认为，如果您删除第一个View标签，它将可以正常工作。我在React本机网站上进行了测试。发生这种情况是因为您的第一个视图并不适合您的所有屏幕。您可以删除第一个View标签，或为其设置弹性。

您也可以检查路线。

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