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

中

这些是我当前的路线：

home.js
post.js
settings.js

用户从主播到 post 我传递了具有帖子数据的参数。

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

每当用户回到 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);

我在做什么错？

我希望每个帖子屏幕在回家中导航时打开并重新渲染。

对于使用React-Navigation V5的人。我面对同一问题，我的组件不是通过在抽屉中使用goBack()进行屏幕链接来卸载。经过一些研究，我发现我们在最新版本的React-Navigation中发现了他们在屏幕选项中为抽屉Navigator添加了属性unmountonblur，默认情况下的错误，这就是组件没有卸载的原因。我正在用它来解决我的问题。

这是我的代码

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

这是这样的链接：unmountonblur

我用来面对同一问题。我使我的屏幕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作为初始路线。这将确保帖子在返回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} />,
}
);

这是react-navigation的工作方式，为了对抗此操作，您可以添加听众，例如：

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

或

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

检查此信息以获取更多信息

在将React导航从2.14.2到3.11.0更新后，我损失了几个小时。有趣的是，它运行完美，并且在升级页面之后没有重新渲染，这导致了错误的语言，而不是页面上的实际数据。我发现的是drawernavigator屏幕不应卸载的问题

因此，我们一部分人抱怨为什么它不重新读取屏幕，而部分则抱怨为什么它正在重新读取。第二部分赢得了战斗：）

基本上，解决方案是预期的：聆听Willfocus事件...只需将其添加到组件中，如果您希望在每次访问中都会重新保密。

 /**
 * When using React Navigation Component is not umnounted and instead stored in navigator. 
 * We need component to be rerendered during each visit to show right info and language
 */
componentDidMount() {
    //this.props.navigation will come in every component which is in navigator
    focusSubscription = this.props.navigation.addListener(
        'willFocus',
        payload => {
            this.forceUpdate();//Native react function to force rerendering
        }
    );
    this.setState({focusSubscription: focusSubscription});
}
componentWillUnmount() {
    this.state.focusSubscription.remove();
}

我试图使用答案中建议的方法，但它们与我的案例并不完美。

解决方案：

我试图用createStackNavigator()将createDrawerNavigator()翻转，它像以前一样工作！我不必使用反应导航事件，诸如componentWillUnmount和componentWillMount的正常事件完美工作。

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

不确定我所做的事情是否有任何问题，但是直到现在。

根据穆罕默德Zain响应，如果您使用的是React Navigation V5，则可以直接传递到抽屉屏幕，该选项UnmountonBlur

options = {{unmountonblur：true}}

这将足够。

React导航文档

我正在使用反应 - 步行数月。但是，将屏幕直接放入抽屉导航器中阻止了要调用的Willunmount方法。堆栈导航器中的首位屏幕，然后将其放入抽屉导航器中。

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

更新：

相关内容

最新更新

热门标签：