我试图拥有一个选项卡栏，并且每个选项卡栏都有自己的堆栈导航器。我拥有的三个选项卡是
家
轮廓
设置
我也想在抽屉里展示这三个选项。我创建了一个抽屉，但只有点击主页才会显示选项卡栏。我想显示选项卡栏，就像您按下个人资料选项卡一样，选项卡栏仍保留在那里。
这是我的代码：
const HomeStackNavigator = createStackNavigator();
export const HomeNavigator = () => {
return (
<HomeStackNavigator.Navigator screenOptions={defaultNavOptions}>
<HomeStackNavigator.Screen
name="Home"
component={HomeScreen}
options={homeScreenOptions}
/>
<HomeStackNavigator.Screen
name="Details"
component={DetailsScreen}
options={detailsScreenOptions}
/>
</HomeStackNavigator.Navigator>
);
};
const ProfileStackNavigator = createStackNavigator();
export const ProfileNavigator = () => {
return (
<ProfileStackNavigator.Navigator screenOptions={defaultNavOptions}>
<ProfileStackNavigator.Screen
name="Profile"
component={ProfileScreen}
options={profileScreenOptions}
/>
<ProfileStackNavigator.Screen
name="EditProfile"
component={EditProfileScreen}
options={editProfileScreenOptions}
/>
</ProfileStackNavigator.Navigator>
);
};
const SettingsStackNavigator = createStackNavigator();
export const SettingsNavigator = () => {
return (
<SettingsStackNavigator.Navigator screenOptions={defaultNavOptions}>
<SettingsStackNavigator.Screen
name="Settings"
component={SettingsScreen}
options={settingsScreenOptions}
/>
<SettingsStackNavigator.Screen
name="AccountDetail"
component={AccountDetailsScreen}
options={accountDetailsScreenOptions}
/>
</SettingsStackNavigator.Navigator>
);
};
const HomeTabNavigator = createBottomTabNavigator();
export const TabNavigator = () => {
return (
<HomeTabNavigator.Navigator screenOptions={defaultNavOptions}>
<HomeTabNavigator.Screen
name="Home"
component={HomeNavigator}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<HomeTabNavigator.Screen
name="Profile"
component={ProfileNavigator}
options={{
tabBarLabel: 'Profile',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="face-profile" color={color} size={size} />
),
}}
/>
<HomeTabNavigator.Screen
name="Settings"
component={SettingsNavigator}
options={{
tabBarLabel: 'Settings',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="account-settings" color={color} size={size} />
),
}}
/>
</HomeTabNavigator.Navigator>
);
};
const AppDrawer = createDrawerNavigator();
export const Drawer = () => {
return(
<AppDrawer.Navigator initialRouteName="Home">
<AppDrawer.Screen name="Home" component={TabNavigator} />
<AppDrawer.Screen name="Profile" component={ProfileNavigator} />
<AppDrawer.Screen name="Settings" component={SettingsNavigator} />
</AppDrawer.Navigator>
)
};
我的目标是始终拥有标签。仅当我们转到任何选项卡的详细信息页面时，选项卡才应隐藏。
你可以让你的TabNavigator堆栈导航器的屏幕，它是抽屉导航器的屏幕，并将自定义抽屉组件传递给抽屉导航器：
const AppDrawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
const HomeTabNavigator = createBottomTabNavigator();
export const TabNavigator = () => {
return (
<HomeTabNavigator.Navigator>
<HomeTabNavigator.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
}}
/>
<HomeTabNavigator.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profile',
}}
/>
<HomeTabNavigator.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarLabel: 'Settings',
}}
/>
</HomeTabNavigator.Navigator>
);
};
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItem
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
<DrawerItem
label="Profile"
onPress={() => props.navigation.navigate('Profile')}
/>
<DrawerItem
label="Settings"
onPress={() => props.navigation.navigate('Settings')}
/>
</DrawerContentScrollView>
);
}
function getHeaderTitle(route) {
return getFocusedRouteNameFromRoute(route) ?? 'Home';
}
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Tabs"
component={TabNavigator}
options={({route}) => ({
headerTitle: getHeaderTitle(route),
})}
/>
<Stack.Screen name="EditProfile" component={EditProfileScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
<Stack.Screen name="AccountDetail" component={AccountDetailsScreen} />
</Stack.Navigator>
);
};
export const Drawer = () => {
return (
<AppDrawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <CustomDrawerContent {...props} />}>
<AppDrawer.Screen name="Stack" component={StackNavigator} />
</AppDrawer.Navigator>
);
};
function App() {
return (
<NavigationContainer>
<Drawer />
</NavigationContainer>
);
}
您不想显示选项卡的屏幕可以放在选项卡导航器外部的堆栈导航器内。
Sources:
-
https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent.
-
https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state.
一定要导入DrawerItem, DrawerContentScrollView from @react-navigation/drawer and getFocusedRouteNameFromRoute from @react-navigation/native.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
