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

Question

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

这些是我目前的路线:

首页.js

Post.js

Settings.js

当用户从 导航时首页 至 发帖 我传递了一个包含帖子数据的参数。

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

当用户回到 时首页 来自 发帖 ，然后帖子将被卸载。并在单击另一篇文章时重新安装新数据。

我的问题是，随着抽屉的实现， 发帖 导航回 时不会卸载屏幕首页 ，我一遍又一遍地得到与第一篇帖子相同的 Prop 和屏幕。

这是我的路线设置:

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);

我究竟做错了什么？

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

Answer 1

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

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

这是链接: unmountonblur