在抽屉导航器中卸载或重新呈现屏幕 [英] Unmount or re-render screen in drawer navigator

问题描述

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

中

以下是我当前的路由：

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

当用户从主页导航到帖子时，我传递了一个包含帖子数据的参数。

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

每当用户从POST返回主页时，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);

我做错了什么？

从主页导航到POST屏幕时，我希望每个POST屏幕都打开并重新呈现为新屏幕。

推荐答案

我过去常常面临同样的问题。我使屏幕Post收听由react-nativationhere而不是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

进行命令式编码

更新：

顺便问一下，我想知道你为什么把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} />,
}
);

这篇关于在抽屉导航器中卸载或重新呈现屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！