如何使用反应导航中心标题？

Question

Home: {
  screen: Home,
  headerTitleStyle: {
    alignSelf: 'center',
  }

HeaderTitleStyle用于代码中的标题样式但不生效

Answer 1

我在Android设备上遇到过这个问题。搜索了一段时间后，有很多建议使用alignSelf: 'center'。然而，它没有修复它。但我能够通过textAlign: 'center' and flex: 1修复它

您可以在组件中指定navigationOptions：

static navigationOptions = {
    headerTitleStyle: { textAlign: 'center', flex: 1 },
};

更新： 最好的解决方案是在createStackNavigator（）中使用headerLayoutPreset: 'center'

const MainStack = createStackNavigator({
    screen: YourScreen,
    navigationOptions: {
        title: 'Title'
    }
},
{
  headerLayoutPreset: 'center'
});

我希望这应该工作:-)

Answer 2

static navigationOptions = {
    headTtle: () => (
        <View style={styles.headerWrapper}>
            <Text
                adjustsFontSizeToFit
                style={styles.headerText}>首页</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    headerWrapper: {
        flex: 1
    },
    headerText: {
        textAlign: 'center', // ok
        alignSelf: 'center', // ok
    }
});

通过这种方式可以解决，这是有效的