在React Navigation 5.x中

Question

我在我的应用程序中使用React Navigation 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;

StackNav ==

export default createStackNavigator({
     PatientList,
     PatientDetails
 });

注销功能==

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

Answer 1

在React Navigation 5.x中

使用clearLayers

map;
layerGroup: L.LayerGroup = L.layerGroup();

ngOnInit() {
    this.map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    this.map.on("click", (e: any) => {
      const {
        latlng: { lat, lng }
      } = e;
      const marker = L.marker([lat, lng], { icon });
      this.layerGroup.addLayer(marker).addTo(this.map);
    });

    this.map.on("zoomend", (e: Event) => {
      // clear the markers here
      this.layerGroup.clearLayers();
    });
  }

Answer 2

将其放在抽屉式导航器的navigationOptions中

unmountInactiveRoutes: true

Answer 3

作为Daniyal's awnser的补充：如上所述，我已经在createDrawerNavigator（）配置中引入了配置：

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

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

如何在注销时从本机抽屉导航器中删除屏幕（卸载组件）？如何重新加载组件数据？

3 个答案:

在React Navigation 5.x中