在抽屉导航器中卸载或重新呈现屏幕

Question

我最近刚添加了抽屉导航器，用createDrawerNavigator()包好屏幕

以下是我目前的路线：

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

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

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

当用户从 post 返回到Home时，post将被卸载。当另一个帖子被点击时，重新挂载新的数据。

我的问题是，通过实现抽屉， post 屏幕在导航回home时不会被卸载，我会不断地获取相同的道具和第一个帖子的屏幕，一次又一次地打开。

这是我的路线设置：

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

我做错了什么？

我希望每个post屏幕打开，并重新呈现为新的，当导航到它从家里。

Answer 1

我以前也会面对同样的问题。我让屏幕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和抽屉放在一起？仅仅是在抽屉里有一个可以访问邮报页面的链接吗？

在我看来，您应该将Home和Post移到新堆栈中，并将Home作为初始路由。这将确保Post在导航回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} />,
}
);

Answer 2

对于那些使用react导航v5的用户。我也面临着同样的问题，我的组件没有卸载，使用goBack()作为抽屉中的屏幕链接。经过很少的研究，我发现在最新版本的react导航中，他们在默认情况下在抽屉导航器的屏幕选项中添加了一个属性unmountonblur，这就是组件不卸载的原因。我用这个来解决我的问题。

这是我的密码

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

下面是它的链接：下山模糊

Answer 3

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

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

或

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

查看这以获得更多信息