在抽屉导航中将标题标题居中答案

【问题标题】：Center the header title in drawer navigation在抽屉导航中将标题标题居中
【发布时间】：2021-11-24 18:05:27
【问题描述】：

我正在尝试使用抽屉导航使标题居中。它在 ios 上的默认行为是居中，但对于 android，它只是在抽屉旁边移动到左侧。如何使其到达导航栏的中心。我尝试了文档中提供的不同选项，但没有任何帮助。这在 ios 和 android 上几乎都是中心外观，但它不是防故障的。

const DrawerNavigator = () => {
  const screenOptionsProps = {
      screenOptions: {
      headerTitle: () => {
        return (
          <View
            style={{
                height: dimensions.height * 0.1,
                width: dimensions.width - dimensions.width * 0.36,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
            <Text>Title</Text>
          </View>
        );
      },
    },
  }
  };
  return (
    <Drawer.Navigator
      {...screenOptionsProps}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={Screen1} />
    </Drawer.Navigator>
  );
};

【问题讨论】：

标签： react-native react-navigation-v6

【解决方案1】：

如果您想将所有标题居中，您可以使用以下参数。

 const AppNavigator = createStackNavigator({
    Home: { screen: HomeScreen },
 }, 
 {
  defaultNavigationOptions: {
      title: 'Aligned Center',
      headerTitleAlign: 'center'
  }
});

对于特定的屏幕，您可以使用以下，

<AppStack.Screen
              name="MyScreen"
              component={MyComponent}
              options={{
                headerShown: true,
                headerStyle: {
                    textAlign:"center", 
                    flex:1 
                },
            
              }}
            />

【讨论】：

我正在使用 DrawerNavigator，这些选项对它不可用

【解决方案2】：

headerTitleAlign 属性用于对齐标题

screenOptionsProps = {
      screenOptions: {
      headerTitleAlign: 'center',
      headerTitle: () => {
        return (
          <View
            style={{
                height: dimensions.height * 0.1,
                width: dimensions.width - dimensions.width * 0.36,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
            <Text>Title</Text>
          </View>
        );
      },
    },
  }

【讨论】：