reactjs - 如何在反应原生应用程序中实现屏幕而不将其添加到抽屉导航器?
问题描述
我使用反应导航 v5,我有一个带有几个屏幕的抽屉导航器,但现在我遇到了问题。我有一个配置文件屏幕,我不想在抽屉导航器上显示,所以我想我必须在这个配置文件屏幕上使用堆栈导航器。但我不知道如何连接这两个导航器,并能够在它们之间导航。我该怎么做呢?我的代码是:
const StackNavigator = createStackNavigator();
export const MyStackNavigator = () => {
const { user, setUser } = useContext(AppContext);
return (
<StackNavigator.Navigator>
{user && <StackNavigator.Screen name="Profile" component={Profile} />}
</StackNavigator.Navigator>
);
};
const DrawerNavigator = createDrawerNavigator();
export const AppNavigator = () => {
const { user, setUser } = useContext(AppContext);
return (
<DrawerNavigator.Navigator
drawerContent={(props) => {
return (
<SafeAreaView
style={{ flex: 1, paddingTop: Platform.OS === "android" ? 50 : 20 }}
>
<View
style={{
alignItems: "center",
justifyContent: "center",
}}
>
{!user ? (
<View style={{ marginBottom: 20 }}>
<Image
source={require("../assets/logo.png")}
resizeMode="contain"
style={{ width: 75, height: 75 }}
/>
<Text
style={{
textAlign: "center",
fontSize: 25,
color: "red",
}}
>
Couples.dk
</Text>
</View>
) : (
<View style={{ marginBottom: 20, alignItems: "center" }}>
<Image
source={{ uri: config.SERVER_URL + user.profileImagePath }}
style={{
width: 75,
height: 75,
borderRadius: 50,
marginBottom: 10,
}}
/>
<Button title="Se Profil" color="#F44336" />
</View>
)}
</View>
<DrawerItemList {...props} />
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<Button onPress={() => {}} title="Logout" color="#F44336" />
</View>
</SafeAreaView>
);
}}
>
{!user && <DrawerNavigator.Screen name="Login" component={Login} />}
{user && (
<DrawerNavigator.Screen name="Søg Brugere" component={BrowseUsers} />
)}
{user && <DrawerNavigator.Screen name="Match" component={Match} />}
{user && <DrawerNavigator.Screen name="Chat" component={Chat} />}
{user && (
<DrawerNavigator.Screen name="Favoritter" component={Favorites} />
)}
</DrawerNavigator.Navigator>
);
};
在 app.js 中
return (
<AppContext.Provider
value={{
user,
setUser,
socket,
setSocket,
onlineUsers,
setOnlineUsers,
pushToken,
setPushToken,
activeConversation,
setActiveConversation,
}}
>
{initiated && (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
)}
</AppContext.Provider>
);
解决方案
我通过在抽屉导航器的屏幕上添加选项来解决这个问题:
{user && (
<DrawerNavigator.Screen
name="Profile"
component={Profile}
options={{
drawerLabel: () => null,
title: null,
drawerIcon: () => null,
}}
/>
)}
推荐阅读
- vue.js - Vuetify v-dialog 没有第二次显示
- jdbc - 连接池中的无限 maxidle/maxactive 会对性能产生负面影响吗?
- kubernetes - 入口 v1beta1 到 v1 - 应用程序失败
- python - 如何在保持原始文件扩展名的同时保存修改后的图像文件名
- excel - 将不同工作表上的变量命名范围导出到一个 pdf
- r - 如何在不带引号(R)的函数参数中使用字符串?
- regex - 正则表达式:在 PowerShell 中删除行尾括号中的数字
- database - 使用一个查询获取集合中的每个项目
- git - 将 git 分支或标签名称设置为打包的 jar
- php - PHP 检查和调整图像大小以满足 Instagram 要求