React native 如何居中反应本机headerTitle*组件*（非字符串）_React Native

React native 如何居中反应本机headerTitle*组件*（非字符串）

react-native

React native 如何居中反应本机headerTitle*组件*（非字符串）,react-native,React Native,就我的一生而言，我不能将headertile组件置于中心位置。想法 class GroupSelectionScreen extends React.Component{ static navigationOptions = ({navigation}) => { return { headerLeft: <View> <Image source={logoImg} style={{widt

就我的一生而言，我不能将

headertile

组件置于中心位置。想法

class GroupSelectionScreen extends React.Component{
    static navigationOptions = ({navigation}) => {

        return {
            headerLeft: <View>
                <Image source={logoImg} style={{width:72, height:33, marginLeft:5}}/>
            </View>,
            headerStyle: {
                backgroundColor: theme.colors.darkBlue,
                height: 75,
            },
            headerTitle: <View style={{
                alignItems: "center",
                flexDirection: 'row',

            }}>
                <View style={{backgroundColor: statusColor, width: 15, height: 15, borderRadius: 8}}></View>
                <Text style={{color: 'white', fontSize: 25}}>{username}</Text>
            </View>,
            headerRight: <SetStatusButton onPress={navigation.getParam('toggleSetStatus')}/>,
        };
    };

类组选择屏幕扩展React.Component{
静态导航选项=（{navigation}）=>{
返回{
左校长：
,
头型：{
背景颜色：theme.colors.darkBlue，
身高：75，
},
标题：
{username}
,
头灯：，
};
};

因为您使用的是

flexDirection:'row'

您可能需要添加属性

justifyContent:'center'

以水平居中视图的内容

这是因为justifyContent在主轴上工作，alignItems在副轴上工作。将flexDirection设置为行会将主轴更改为行

将flexDirection添加到零部件的样式将确定其布局的主轴

将justifyContent添加到组件的样式中可确定子级沿主轴的分布

您可以在文档中看到更多信息

这是小吃

三个视图中的每一个都有

flexDirection:“行”

第一个视图有

justifyContent:“center”

，文本水平居中

第二个视图有

alignItems:“center”

，文本垂直居中

第三个视图既有

justifyContent:“center”

又有

alignItems:“center”

，文本水平和垂直居中

这是一张它看起来像什么的图片

这是代码

<View>
  <View style={{flexDirection: 'row', justifyContent: 'center', backgroundColor: 'yellow', height: 100, width: 100, margin: 10}} >
    <Text>Hello</Text>
  </View>
  <View style={{flexDirection: 'row', alignItems: 'center', backgroundColor: 'cyan', height: 100, width: 100, margin: 10}} >
    <Text>Hello</Text>
  </View>
  <View style={{flexDirection: 'row', justifyContent: 'center', alignItems:'center', backgroundColor: 'forestgreen', height: 100, width: 100, margin: 10}} >
    <Text>Hello</Text>
  </View>
</View>

这里有一个小吃显示它工作

，因为您使用的是

flexDirection:'row'