wake-up-neo.com

Wie löse ich ein Ereignis aus, wenn eine Komponente angezeigt wird, wenn die reaktative Navigation verwendet wird?

Ich verwende reaktives mit reaktativer-Navigation. Ich möchte Daten neu laden, wenn eine Komponente angezeigt wird. Die Komponente wird angezeigt, wenn ein Benutzer auf eine Registerkarten-Navigationsschaltfläche klickt. 

Soll ich reaktive Lebenszyklusereignisse verwenden oder gibt es in der reaktionsnativen Navigation etwas, das eine Funktion auslösen kann, wenn ein Benutzer zu einer Komponente zurück navigiert?

Ich verwende redux. Ich bin mir nicht sicher, ob das als Hilfe verwendet werden könnte.

Dieses Problem bezieht sich auf onDisplay, das scheint was ich suche. Ich kann jedoch keine offizielle Dokumentation darüber finden - https://github.com/wix/react-native-navigation/issues/130

react-nativereact-native-navigation
16
Daryn

Ich mag die von Bruno Reis vorgeschlagene Lösung. Ich habe meine angepasst, um es ein bisschen einfacher zu machen.

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

}
14
dctucker

füge dies als 'callIfBackToThisRoute' ein ...

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

und verwenden Sie es in Ihrer Komponente ...

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

Das habe ich am Ende gebraucht:

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

mit componentDidUpdate() auf dem Bildschirm gekoppelt (was je nach currentScreen von screenProps etwas bewirken kann).

Hinweis: Ich weiß nicht was/wo getCurrentRouteName() ist und es gab einen Fehler für mich, daher verwende ich es nicht und verwende action.routeName direkt.

Siehe https://github.com/react-community/react-navigation/issues/2371 und https://github.com/react-community/react-navigation/issues/51#issuecomment-323536642 für weitere Informationen und Diskussion.

1
Hendy Irawan