react-native - 反应屏幕之间的本机导航
问题描述
我正在尝试使用 reactnavigation.org 库,但对此我有一些问题。我有两种类型的导航屏幕。两个屏幕是注册和授权。其他是常规的应用程序屏幕。问题是我无法渲染父组件 App.js 或其他功能以从子组件重新加载应用程序,从而更改我的屏幕块。屏幕之间的导航运行、历史记录、配置文件、OtherRunners 工作正常。屏幕 Main 和 Enter 之间的导航工作正常。但是,如果我需要从 Run 导航到 Main,或者从 Enter 导航到 Run,就会出现问题。
应用程序.js
const App = () => {
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
const [loggedIn, setLoggedIn] = useState(false)
async function getUserEmail(){
if(await AsyncStorage.getItem('@email')){
setLoggedIn(true)
}else{
setLoggedIn(false)
}
}
getUserEmail()
function MenuDraw(){
return(
<Drawer.Navigator
drawerContentOptions={}
drawerType={}
drawerStyle={{}}
>
<Drawer.Screen
name="Run"
component={Run}
options={}
/>
<Drawer.Screen
name="History"
component={History}
options={}
/>
<Drawer.Screen
name="Profile"
component={Profile}
options={}
/>
<Drawer.Screen
name="OtherRunners"
component={OtherRunners}
options={}
/>
<Drawer.Screen
name="LogOut"
component={Run}
initialParams={{action: 'logout'}}
options={}
/>
</Drawer.Navigator>
)
}
function MyDrawer(){
if(loggedIn){
return(
<Stack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={"MenuDraw"}
>
<Stack.Screen name="MenuDraw" component={MenuDraw}/>
<Stack.Screen name="Details" component={Details}/>
</Stack.Navigator>
)
}else{
return (
<Stack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={"Main"}
>
<Stack.Screen name="MenuDraw" component={MenuDraw} />
<Stack.Screen name="Details" component={Details} />
<Stack.Screen name="Main" component={Main} />
<Stack.Screen name="Enter" component={Enter} />
</Stack.Navigator>
)
}
}
return(
<NavigationContainer>
<MyDrawer/>
</NavigationContainer>
)
}
export default App;
我尝试使用重新加载应用程序工具,但这些对我没有帮助。他们没有工作。在下面的这部分代码中。在运行屏幕上。
运行.js
const Run = ({navigation,route}) => {
const clearStorage = async () => {
await AsyncStorage.clear()
}
if(route.params){
if(route.params.action === 'logout'){
clearStorage()
navigation.navigate("Main", {})
}
}
}
export default Run;
我正在尝试通过清理存储并导航到主屏幕来注销。但它不适用于发布模式。这个我试过了,如下。
应用程序.js
function MyDrawer(){
if(loggedIn){
return(
<Stack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={"MenuDraw"}
>
<Stack.Screen name="MenuDraw" component={MenuDraw}/>
<Stack.Screen name="Details" component={Details}/>
++++ <Stack.Screen name="Main" component={Main} />
++++ <Stack.Screen name="Enter" component={Enter} />
</Stack.Navigator>
)
}else{
return (
<Stack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={"Main"}
>
<Stack.Screen name="MenuDraw" component={MenuDraw} />
<Stack.Screen name="Details" component={Details} />
<Stack.Screen name="Main" component={Main} />
<Stack.Screen name="Enter" component={Enter} />
</Stack.Navigator>
)
}
}
两种方式都不起作用。我该如何解决?我可以从子屏幕渲染 App.js 组件吗?或者我应该创建两个屏幕块线
<Stack.Screen name="MenuDraw" component={MenuDraw}/>
<Stack.Screen name="MenuRegister" component={MenuRegister}/>
并把我所有的屏幕按物品放在匹配部分?
我需要从此部分注销: App.js
some code
<Drawer.Screen
name="LogOut"
component={Run}
initialParams={{action: 'logout'}}
options={}
/>
</Drawer.Navigator>
some code
解决方案
您是否尝试过使用 useEffect 挂钩来上路?:-)
useEffect(() => {
const getUserEmail = async () => {
if(await AsyncStorage.getItem('@email')){
setLoggedIn(true)
}else{
setLoggedIn(false)
}
};
getUserEmail();
}, []);
推荐阅读
- jquery - 使用列表子项内带有链接的列表关闭下拉菜单
- python - 条件后未定义变量
- rust - 如何在不让编译器抱怨借用地图的情况下使用 HashMap 的 ref 值
- javascript - React - TypeError:无法读取未定义的属性'imageurl'
- x86 - 为什么要退出外部中断?
- msbuild - 为什么.Net Core 2.2 现在发布大量其他 dll
- java - 来自响应的 Internet Explorer Cookie 未覆盖现有 Cookie
- android - 何时记录 Firebase 中的 first_open 事件?
- python - builtins.TypeError: 不支持的操作数类型 -: 'list' 和 'int'
- d3.js - 无法从 d3 元素访问 json 值