React native 在Drawer Navigator 3.0中单击项目菜单时如何重置屏幕

我有React navigation的抽屉导航器，当我单击项目菜单时，例如：

1：单击项目A（屏幕A）->从componentDidMount获取服务器上的一些数据，将一些数据输入InputText

2：打开抽屉菜单并单击项目B（屏幕B），然后再次打开菜单并单击项目A（屏幕A）->我在仍然存在之前获取的一些数据没有重新加载，甚至我在仍然存在之前输入的一些数据也没有重置

我使用的是react navigation 3.1

import { StackActions, NavigationActions, DrawerItems } from 'react-navigation'

<ScrollView>
         <DrawerItems {...this.props}
                      onItemPress={({route, focused}) => {
                        console.log(route)
                        // this.resetStack(route, focused)
                        this.props.onItemPress({ route, focused })
                        //i try to reset at there but nothing
                      }}
         />

。。。
{
此.resetStack（路由，聚焦）
}}
/>

不是最好的解决方案，但我找不到更好的解决方案：）

componentDidMount

一旦您从抽屉中选择了屏幕A，就会调用该事件。。。然后单击另一个屏幕后，如屏幕B==>屏幕A将从屏幕上卸载。。。这就是为什么当你重新打开screenA==>

componentDidMount

时会再次调用screenA事件的原因

为了解决单击时重新加载数据的问题，您需要在组件WillReceiveProps中包含重置逻辑：

componentDidMount事件。//将在第一次单击时执行

componentWillReceiveProps//将在下一次单击时执行

---

从服务器获取数据的位置。。。渲染屏幕A时。。。你能提供你的代码吗？是的，当呈现屏幕A时，但不仅仅是获取数据，我更新了这篇文章，谢谢，我知道如何在获取api时重置数据，但这不是我的问题，获取数据只是一个例子，我的意思是当我在屏幕A中输入任何内容时，或者我滚动到屏幕A的底部时，当我通过导航菜单中的单击项返回屏幕A时，它不会改变，不会改变；因为你的屏幕已经安装好了。。。然后您需要将重置逻辑放入

组件WillReceiveProps

事件中。。。就像清除状态数据。。。或滚动到顶部。。。您想做的任何事情都必须在此事件处理程序中完成。。。您无法卸载屏幕并再次重新安装以获得屏幕的全新外观。。大多数情况下，清除渲染所依赖的

状态会将屏幕重置为默认视图哦，谢谢，看起来react native比native更难，在android中不是这样的：D@Mr.Tuan正如我在上面的评论中提到的。。。大多数情况下，重置组件状态只是重置组件
状态
（因为它应该是您唯一的真理来源），这是一个更简单、更优雅的解决方案。。。但很高兴你找到了一个令人满意的解决方案。。。
resetStack = (name, focused) => {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'MenuBar' })],
    })
    this.props.navigation.dispatch(resetAction)
    this.props.navigation.navigate(NavigationActions.navigate({
      routeName: 'MenuBar',
      action: NavigationActions.navigate({ routeName: name.routeName })
    }))
  }

...
<DrawerItems {...this.props}
                       onItemPress={({route, focused}) => {
                         this.resetStack(route, focused)
                       }}
          />

class YourComponent extends React.Component {
    state = {
        yourData: null
    };

    fetchData = () = {
        // get some data
    };

    componentDidMount() {
        // you fetched data here:
        const data = fetchData();
        this.setState({ yourData: data });
    }

    componentWillReceiveProps(nextProps) {
        // check if you need to re-fetch data ... in case of new props:
        if (needToReloadData) {
            const data = fetchData();
            this.setState({ yourData: data });
        }

        if(needToReset) {
            this.setState({ yourData: null });
        }
    }
}