React Native如何彻底解决安卓标题居中问题

对于用React Native开发app的人来说解决安卓标题居中一直以来是一个很头疼的问题，网上的通常解决方案是通过设置 alignSelf:'center'来解决。这种方式在react-navigation3.0以下是可以解决的，但最近我做一个公司的新项目的时候把react-native升级到了最新版本，react-navigation也对应升级到3.1.0之后发现这个方法在自定义头部的时候并不奏效；

以下是我的解决方案：

一：头部只有文字标题的情况，需要设置headerTitleContainerStyle；

 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 defaultNavigationOptions: {
     headerTitleStyle: {
       alignSelf: 'center',
       textAlign: 'center',
       flex: 1,
       fontSize: 18,
       color: '#9c9c9c',
     },
     headerTitleContainerStyle: {
       left: TITLE_OFFSET,
       right: TITLE_OFFSET,
     },
   }

下图是设置完以上配置后的效果，

image.png

二：头部需要自定义的，比如头部有按钮或者图片的情况，直接上代码


const styles = StyleSheet.create({
  headerTitle: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 'auto',
    marginLeft: 'auto',
  },
  headerText: {
    color: '#FFFFFF',
    fontSize: 17,
    fontWeight: '500',
    marginRight: 4,
  },
});

static navigationOptions = ({ navigation, params, }) => {
    return {
      headerTitle: <View style={styles.headerTitle}>
        <Text style={styles.headerText} onPress={_ => Alert.alert('自定头部标题')}>{ !!params && params.headerName }</Text>
        <Icon name="ios-arrow-forward" size={15} color="#FFFFFF" />
      </View>,

      headerRight: <TouchableOpacity style={{ paddingHorizontal: 15, }} onPress={_ => Alert.alert('自定头部右侧')}>
        <Icon name="md-qr-scanner" size={20} color="#FFFFFF" />
      </TouchableOpacity>,
    };
  };

注：其中 headerTitle必须要用 marginRight: 'auto',marginLeft: 'auto',来设置，不能用简写的marginHorizontal:'auto'来代替，你可以理解为这是react-navigation的一个bug。

下图是头部自定义后的效果：

image.png

完整代码在我的墨子项目中：https://github.com/duheng/Mozi
有兴趣的可以跑起来看一下

通过 react-native兴趣交流群（397885169）的同学的反馈，好多人对于头部只有文字标题的安卓居中问题都能通过度娘解决，但是对于需要自定义头部的时候就不太好解决了，度娘也很难找到相关解决方案，所以希望我的这篇文章能帮助到大家。

最后编辑于：2019.03.20 16:43:23