【问题标题】:How to remove screens (unmount component) from react native drawer-navigator on log out?How to reload Components Data?如何在注销时从反应本机抽屉导航器中删除屏幕(卸载组件)?如何重新加载组件数据?
【发布时间】:2019-02-12 12:30:59
【问题描述】:

我在我的应用程序中使用反应导航 v3,我在抽屉导航器中使用堆栈导航器,在单击注销时,我导航到登录屏幕并清除用户存储,但是每当我再次登录时,主组件不会调用 componentWillMount 或componentDidMount 方法,并在其上显示先前加载的数据。这是我的代码>

const screens = {
  login: { screen: Login },
  dashboard: { screen: Dashboard },
  patientList:{screen:StackNav},
  headerComponent:HeaderComponent
 }

  const MyDrawerNavigator = createDrawerNavigator(
     screens,
      {
       initialRouteName: 'login',
      contentComponent: Sidebar
       }
     );

    App  = createAppContainer(MyDrawerNavigator);
    export default App;

堆栈导航 ==

export default createStackNavigator({
     PatientList,
     PatientDetails
 });

注销功能 ==

  localStorageService.removeAllKeys().then((res) => {
    this.props.navigation.navigate(route, { isLogin: 'N' })
  });

【问题讨论】:

    标签: react-native react-native-navigation react-native-component


    【解决方案1】:

    在 React 导航 5.x 中

    使用unmountOnBlur

    <Drawer.Screen
        name={...}
        component={...}
        unmountOnBlur={true}
        options={{unmountOnBlur: true}}
    />
    

    【讨论】:

    • 如果我不需要抽屉而只想使用 stackNavigator 怎么办?
    • 只有这部分就足够了options={{unmountOnBlur: true}}
    【解决方案2】:

    把这个放在抽屉导航器的navigationOptions中

    unmountInactiveRoutes: true
    

    【讨论】:

    • 这对我不起作用。在使用createDrawerNavigator 创建的组件中使用。
    • 它对我有用。谢谢!使用 react-navigation 5.1.0(通过 Expo)
    【解决方案3】:

    作为Daniyal's awnser的补充:我已经介绍了createDrawerNavigator() configs里面的配置如上:

    const AppNavigator = createDrawerNavigator(
    {
      Home:{
        screen: Home
      },
      Login:{
        screen: Login,
        navigationOptions: {
            drawerLabel: () => null
        }
      }
    },
    {
      unmountInactiveRoutes: true
    });
    

    现在所有页面都可以在没有任何“缓存”的情况下工作。

    【讨论】:

      猜你喜欢
      • 2019-08-09
      • 1970-01-01
      • 1970-01-01
      • 2021-04-27
      • 2019-07-27
      • 1970-01-01
      • 1970-01-01
      • 2020-06-20
      • 1970-01-01
      相关资源
      最近更新 更多