如何居中反应原生headerTitle * component *（不是字符串）

Question

在我的一生中，我无法集中headerTitle组件。想法？

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')}/>,
        };
    };

Answer 1

由于您使用的是flexDirection:'row'，因此您可能想添加属性justifyContent:'center'，以使视图内容水平居中

这是由于justifyContent在主轴上起作用，而alignItems在次级轴上起作用。将flexDirection设置为row会将主轴更改为row。

  

在组件的样式中添加flexDirection可以确定其布局的主轴。

     

在组件的样式中添加justifyContent可以确定子对象沿主轴的分布。

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

https://facebook.github.io/react-native/docs/flexbox

这是小吃https://snack.expo.io/@andypandy/flexdirection

三个视图中的每个视图都有flexDirection: 'row'

1. 第一个视图具有justifyContent: 'center'，文本水平居中。

2. 第二个视图具有alignItems: 'center'，文本垂直居中。

3. 第三个视图同时具有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>

更新

在react-navigation中，问题张贴者给出的headerTitle在Android和iOS中的处理方式似乎有所不同。

在iOS中，headerTitle垂直和水平居中，但是在Android中，View仅垂直居中并向左对齐。显然这是不理想的。

有一种方法可以使它同时在iOS和Android中运行

1. 用flex:1将原始标头包装在View中
2. 确保原始标头的justifyContent: 'center'的样式为alignItems: 'center'和headerTitle

这是新的<View style={{flex: 1}}> <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}> <View style={{backgroundColor: 'green', width: 15, height: 15, borderRadius: 8}}/> <Text>Spencer</Text> </View> </View>

的代码

electron

以下是显示它可以正常工作的小吃https://snack.expo.io/@andypandy/navigation-header