在抽屉导航器中卸载或重新渲染屏幕

Posted 2021-03-26

我最近刚添加抽屉导航器并将我的屏幕包裹在createDrawerNavigator()中

这些是我目前的路线：

• Home.js
• Post.js
• Settings.js

当用户从Home导航到Post时，我传递一个包含post数据的param。

onPress={() => this.props.navigation.navigate('Post', {postData: postData})}

当用户从Post回到Home时，将卸载post。单击另一个帖子时再次使用新数据重新安装。

我的问题是，通过实现抽屉，导航屏幕在导航回家时没有卸载，我不断地获得相同的道具和第一个帖子的屏幕打开，一遍又一遍。

这是我的路线设置：

import React from "react";
import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './screens/Home';
import Post from './screens/Post';
import Settings from './screens/Settings';
import SideBar from './screens/sidebar';

const Drawer = createDrawerNavigator(
{
    Home: {screen: Home},
    Post: {screen: Post},
    Settings: {screen: Settings}
},
{
    initialRouteName: "Home",
    backBehavior: 'initialRoute',
    contentOptions: {
    activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />,
}
);

const AppNavigator = createStackNavigator(
    {
    Drawer: {screen: Drawer},
    },
    {
    initialRouteName: "Drawer",
        headerMode: "none",
    }
);

export default createAppContainer(AppNavigator);

我究竟做错了什么？

我希望每个帖子屏幕都打开，并在从Home导航到它时重新呈现为新的。

答案

我用来面对同样的问题。我让我的屏幕Post听react-nativation here而不是componentDidMount触发的导航焦点事件。

import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

const Post = () => (
  <View>
    <NavigationEvents
      onWillFocus={payload => console.log('will focus',payload)}
      onDidFocus={payload => console.log('did focus',payload)} // 
      onWillBlur={payload => console.log('will blur',payload)}
      onDidBlur={payload => console.log('did blur',payload)}
    />
    {/* 
      Your view code
    */}
  </View>
);

使用onDidFocus，您可以获取导航参数，获取数据和/或更新状态。如果需要，您可以使用onDidBlur清除屏幕状态。

或者，您可以像this doc here那样进行命令式编码

Update :

顺便说一句，我想知道为什么你把Post与抽屉？是否只是在抽屉中有一个可以访问帖子页面的链接？

在我看来，你应该将Home和Post移动到新的堆栈并将Home作为初始路线。这将确保在导航回Home后卸载Post。

看看下面的示例

const HomeStack = createStackNavigatior({
   Home: {screen: Home},
   Post: {screen: Post},
}, {
   initialRouteName: 'Home', 
   ...
})

const Drawer = createDrawerNavigator(
{
    HomeStack
    Settings: {screen: Settings}
},
{
    initialRouteName: "HomeStack",
    backBehavior: 'initialRoute',
    contentOptions: {
    activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />,
}
);

另一答案

这是react-navigation的工作方式，为了解决这个问题，你可以添加监听器，如下所示：

<NavigationEvents
    onDidFocus={payload => { console.log(payload.state.params,'<- this has your new params') }}
/>

要么

 this.props.navigation.addListener('didFocus', payload=>{console.log(payload)})

查看this了解更多信息

另一答案

我尝试使用答案中建议的方法，但它们与我的案例并不完美。

解：

我试图用createDrawerNavigator()翻转createStackNavigator()，它像以前一样完美！我没有必要使用反应导航事件，像componentWillUnmount和componentWillMount这样的正常事件完美地工作。

const MainScreens = createStackNavigator(
{
   Home: {screen: Home},
   Post: {screen: Post},
   Settings: {screen: Settings}
},
{
   initialRouteName: "Home",
   headerMode: "none",
}
);

const AppNavigator = createDrawerNavigator(
{
   Main: {screen: MainScreens},
},
{
   initialRouteName: "Main",
   backBehavior: 'initialRoute',
   contentOptions: {
   activeTintColor: "#e91e63"
   },
   contentComponent: props => <SideBar {...props} />,
}
);

export default createAppContainer(AppNavigator);

不知道我做了什么有什么不对，但它到目前为止工作正常。