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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在抽屉导航器中卸载或重新渲染屏幕相关的知识,希望对你有一定的参考价值。

我最近刚添加抽屉导航器并将我的屏幕包裹在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导航到它时重新呈现为新的。

答案

我用来面对同样的问题。我让我的屏幕Postreact-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与抽屉?是否只是在抽屉中有一个可以访问帖子页面的链接?

在我看来,你应该将HomePost移动到新的堆栈并将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(),它像以前一样完美!我没有必要使用反应导航事件,像componentWillUnmountcomponentWillMount这样的正常事件完美地工作。

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

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

以上是关于在抽屉导航器中卸载或重新渲染屏幕的主要内容,如果未能解决你的问题,请参考以下文章

在某些片段中隐藏导航抽屉

导航抽屉和工具栏出现在初始屏幕中

NavHostFragment:使用导航抽屉重新打开更改的片段

从片段中禁用导航抽屉

在导航抽屉中管理片段

如何打开关闭应用程序后打开的最后一个片段并使用导航抽屉和导航组件重新打开它