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

Question

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

这些是我目前的路线：

• 主页.js
• Post.js
• 设置.js

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

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

当用户从Post返回Home时，post 将被卸载。并在单击另一篇文章时重新安装新数据。

我的问题是，通过实施抽屉，导航回主页时不会卸载帖子屏幕，我一遍又一遍地不断打开第一个帖子的相同道具和屏幕。

这是我的路线设置：

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

我究竟做错了什么？

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

Answer 1

对于那些使用 react-navigation v5. 我遇到了同样的问题，我的组件没有通过goBack()用于抽屉中的屏幕链接来卸载。经过一些研究，我发现我们在最新版本的 react-navigation 中，他们unmountonblur在 drawer navigator 的屏幕选项中添加了一个属性，默认情况下它是 false，这就是组件不会卸载的原因。我正在使用它来解决我的问题。

这是我的代码

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

这是链接：unmountonblur

Answer 2

我曾经面临同样的问题。我让我的屏幕Post监听由react-nativation 此处触发的导航焦点事件而不是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。

或者，您可以按照此处的文档进行命令式编码

更新 ：

顺便问一下，我想知道你为什么要放Post抽屉？难道只是在抽屉里有一个可以访问Post页面的链接吗？

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

看看下面我的样本

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} />,
}
);