javascript - 如何在 react 导航中使标题居中而不受到 headerLeft 的影响？

Question

我使用 react 导航，并将标题置于栏中居中，但它受到 headerLeft 的影响， 当我关闭它们时，它就可以工作并将标题准确地居中， 如何使用另一个左右按钮\图标来做到这一点而不影响标题

代码:

const RootNavigator = createStackNavigator({
  Home: {
   screen: Home,
   navigationOptions: {
     title: "Home",
    //headerLeft: null, // here the issue
     headerStyle: {
        backgroundColor: 'rgb(42,55,68)',
     },
      headerTitleStyle: {
         flex: 1,
         textAlign: 'center',
         color: "#fff",
       }
    }
  }
 });

Answer 1

您的 headerTitleStyle Prop 没有问题，只需确保 headerLeft 和 headerRight 都有一个 View 即可。

示例:

 headerLeft : (<View><Entypo name='menu' size={28} color='white' onPress={() => navigation.openDrawer()} /></View>),
 headerRight:(<View></View>)