React Native flexDirection bug？
React Native flexDirection bug？
提问于 2017-10-16 18:03:55
我只是盯着react native和玩转。所以我只是尝试了flexDirection风格。
因此，我复制了facebook-react中的示例，它看起来不错。
Code I testet和webside以及在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>对于flexDirection: 'row'在我的iPhone (expo应用程序)上的外观是相同的。但是如果我碰巧使用column，我的屏幕就是白色的(视图元素消失了？)。下一件事，我尝试设置justifyContent: 'center'后，我这样做它看起来像我附加的图像，超级神奇，如果你测试它在脸书页面，它应该是居中…
那么这是一个bug吗？我的错误是什么？
这就是那个洞的事情...：
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>
);
}
}
回答 2
Stack Overflow用户
发布于 2017-10-16 18:18:32
我认为如果你去掉第一个View标签，它会工作的很好。我在React原生网站上进行了测试。这是因为你的第一个视图并不适合你所有的屏幕。您可以重新打开第一个View标记，或为其设置flex。
你也可以勾选Route。
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>
);
}
}
Stack Overflow用户
发布于 2017-10-17 04:07:52
我通常有这个问题，你可能不得不在父视图上添加一个flex:1，这样它就会充满整个屏幕，然后flex-directions应该看起来是正确的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46767688
复制相关文章
相似问题
腾讯云开发者
