如何使用react-navigation将headerTitle居中？

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 }, };

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

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

我希望这应该工作：-)

Answer 2

在较新的版本（2020）上，您应该使用（在 navigationOptions 内）： headerTitleAlign: 'center' 它应该可以工作！;)

Answer 3

static navigationOptions = {\n    headTtle: () => (\n        <View style={styles.headerWrapper}>\n            <Text\n                adjustsFontSizeToFit\n                style={styles.headerText}>\xe9\xa6\x96\xe9\xa1\xb5</Text>\n        </View>\n    )\n}\n\nconst styles = StyleSheet.create({\n    headerWrapper: {\n        flex: 1\n    },\n    headerText: {\n        textAlign: 'center', // ok\n        alignSelf: 'center', // ok\n    }\n});\n

\n\n

这样就可以解决\xef\xbc\x8c了

\n