React Native 在抽屉式导航栏中居中显示页眉标题

fdx2calv 于 2023-02-09 发布在 React

关注(0)|答案(3)|浏览(191)

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

来源：https://stackoverflow.com/questions/70100970/center-the-header-title-in-drawer-navigation

3条答案

按热度按时间

2jcobegt1#

检查以下代码：

<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"
      />
    ),
  }}
>

赞(0）回复(0）举报 2023-02-09

h5qlskok2#

如果你想居中你的所有标题，你可以使用以下参数.

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

赞(0）回复(0）举报 2023-02-09

ou6hu8tu3#

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

赞(0）回复(0）举报 2023-02-09

我来回答

React Native 在抽屉式导航栏中居中显示页眉标题

3条答案

相关问题

热门标签

最新问答