将标题标题置于抽屉式导航中居中

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

检查下面的代码：

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerMenu {...props} />}
  screenOptions={{
    headerShown: true,
    drawerActiveBackgroundColor: Colors.ActiveBackgroundColor,
    drawerActiveTintColor: Colors.ActiveTintColor,
    drawerInactiveTintColor: Colors.InactiveTintColor,
    drawerLabelStyle: {
      marginLeft: -2,
      fontSize: 15,
    },
    drawerType: "slide",
    headerStyle: {
      height: 60, // Specify the height of your custom header
      backgroundColor: "rgba(0, 0, 0, 0.1)",
      elevation: 0,
      shadowOpacity: 0,
    },

    headerTitle: "title",
    // HERE IS THIS MAGIC LINE OF CODE

    headerTitleAlign: "center",

    // THAT'S ALL YOU NEED IN DN6 :)

    headerRight: () => (
      <Button
        onPress={() => alert("This is a button!")}
        title="Info"
        color="#fff"
      />
    ),
  }}
>