web-dev-qa-db-fra.com

Comment déclencher un événement lorsqu'un composant est affiché lors de l'utilisation de react-native-navigation?

J'utilise react-native avec react-native-navigation. J'aimerais recharger des données lorsqu'un composant est affiché. Le composant est affiché lorsqu'un utilisateur clique sur un bouton de navigation par onglet. 

Devrais-je utiliser les événements de cycle de vie de réaction ou existe-t-il quelque chose dans la navigation réactif-natif qui puisse déclencher une fonction lorsqu'un utilisateur retourne à un composant?

J'utilise Redux, je ne suis pas sûr que cela puisse aider?

Ce numéro fait référence à onDisplay qui semble être ce que je recherche. Cependant, je ne trouve aucune documentation officielle à ce sujet - https://github.com/wix/react-native-navigation/issues/130

react-nativereact-native-navigation
16
Daryn

J'aime la solution proposée par Bruno Reis. J'ai modifié le mien pour le rendre un peu plus simple.

class Whatever extends Component {
    componentDidMount(){
        this.load()
        this.props.navigation.addListener('willFocus', this.load)
    }
    load = () => {
        ...
    }

}
14
dctucker

inclure ceci comme 'callIfBackToThisRoute' ...

export default ( props, call ) => {
    if( !props.navigation ) throw 'I need props.navigation'
    const thisRoute = props.navigation.state.routeName;
    props.navigation.addListener(
        'willFocus',
        payload => {
            if( payload.state.routeName == thisRoute) call(props)
        }
    );
}

et l'utiliser dans votre composant ...

componentDidMount() {
    const { doIt } = this.props;
    doIt()
    callIfBackToThisRoute(
        this.props,
        (props) => doIt()
    )
}
1
Bruno Reis

C'est ce que j'ai fini par utiliser:

export default class RootNavigator extends React.Component {
  state = {currentScreen: null}

  _onNavigationStateChange(prevState, newState, action) {
    // const currentScreen = getCurrentRouteName(currentState)
    // const prevScreen = getCurrentRouteName(prevState)
    // console.debug('onNavigationStateChange currentScreen=', currentScreen,
    //   'prevScreen=', prevScreen, 'action.routeName=', action.routeName)
    console.debug('onNavigationStateChange action.routeName=', action.routeName)
    this.setState({currentScreen: action.routeName})
  }

  render() {
    return <RootStackNavigator onNavigationStateChange={this._onNavigationStateChange.bind(this)}
      screenProps={{currentScreen: this.state.currentScreen}}/>;
  }

couplé avec componentDidUpdate() à l'écran (qui peut ou non effectuer quelque chose en fonction de la currentScreen de screenProps).

Note: Je ne sais pas ce que/où getCurrentRouteName() est et cela a donné une erreur pour moi, donc je ne l'utilise pas et utilise action.routeName directement.

Voir https://github.com/react-community/react-navigation/issues/2371 et https://github.com/react-community/react-navigation/issues/51#issuecomment-323536642 pour plus d'informations et discussion.

1
Hendy Irawan