如何修复反应本机对齐

Question

我遇到了与本机布局对齐有关的问题。 我想把文字放在中间。 我尝试了 flexbox 和绝对位置，但得到了相同的结果

 <View style={{
           flex: 1, 
           flexDirection: 'row', 
           justifyContent: "center",
           alignItems: "center"
         }}> 

        <Text style={{backgroundColor:"green"}}>Hello world</Text>
</View>

Answer 1

对不起，大家晚了！ 我现在将分享我的代码：

App.js：

 render() {
   return (
     <Provider store={Store}>
          <View style={styles.container}>
            <DashboardPage/>
          </View>
      </Provider>
   )
}

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
        android: {
            marginTop: StatusBar.currentHeight // android phones have issues with StatusBar overlap
        }
    })
  }
})

DashboardPage.js

 render() {
   return (
          <View style={{
               flex: 1, 
               flexDirection: 'row', 
               justifyContent: "center",
               alignItems: "center"
           }}>
               <Text style={{backgroundColor:"green"}}>Hello world</Text>

            </View>  
        )
 }

Answer 2

尝试将flex：1更改为高度：'100％'

Answer 3

您需要将样式设置为容器：示例

 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center,
 }

然后它的子项将转到屏幕中间。

Answer 4

从样式中删除flexDirection:'row'