react-native - 在抽屉导航中将标题标题居中

Question

我正在尝试使用抽屉导航使标题居中。它在 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>
  );
};

Answer 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 
                },
            
              }}
            />

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