Как сбросить экран при нажатии пункта меню в Drawer Navigator 3.0

Question

У меня есть Drawer Navigator of React навигация, когда я нажимаю на пункт меню, например:

1: щелкните элемент A (экран A) -> получить некоторые данные на сервере из componentDidMount, введите некоторые данные в InputText, ...

2: откройте меню выдвижного ящика и щелкните элемент B (экран B), затем снова откройте меню и щелкните элемент A (экран A) -> некоторые данные, которые я получил ранее, все еще там и не перезагружаются, даже некоторые данные, которые я ввел прежде чем все еще там, не сбрасывается .

Я использую реагирующую навигацию 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 = (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)
                       }}
          />

Не лучшее решение, но я не могу найти другого лучшего:)

Answer 1

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

componentDidMount событие экрана A вызывается, как только вы выбрали его в своем ящике ... и затем после нажатия на другой экран, такой как экран B ==> экран A отключается от экрана ... именно поэтому, когдавы повторно открываете screenA ==> componentDidMount событие screenA вызывается еще раз ...

, чтобы решить вашу проблему с перезагрузкой данных при нажатии, вам необходимо включитьсбросить логику в componentWillReceiveProps:

1. componentDidMount событие.// будет выполнен при первом щелчке.
2. componentWillReceiveProps // будет выполнен при следующих последующих щелчках