我正在尝试使用抽屉导航将标题居中。它在 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>
);
};
最佳答案
检查下面的代码:
<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"
/>
),
}}
>
关于react-native - 将标题标题置于抽屉式导航中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70100970/