web-dev-qa-db-ja.com

react-native-navigationを使用しているときにコンポーネントが表示されたときにイベントをトリガーする方法は？

反応ネイティブと反応ネイティブナビゲーションを使用しています。コンポーネントが表示されたときにデータをリロードしたいと思います。ユーザーがタブナビゲーションボタンをクリックすると、コンポーネントが表示されます。

反応ライフサイクルイベントを使用する必要がありますか、またはユーザーがコンポーネントに戻ったときに機能をトリガーできる反応ネイティブナビゲーションに何かがありますか？

私はreduxを使用していますが、それが役立つのかどうかわかりませんか？

この問題はonDisplayを参照しており、私が探しているもののようです。しかし、私はそれに関する公式文書を見つけることができません- https://github.com/wix/react-native-navigation/issues/1

react-nativereact-native-navigation
19
Daryn

ブルーノ・レイスが提案したソリューションが気に入っています。私はそれを少しシンプルにするために微調整しました。

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

}
25
dctucker

これを「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)
        }
    );
}

コンポーネント内で使用します...

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

これは私が最終的に使用したものです：

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

画面上のcomponentDidUpdate()と結合します（screenPropsのcurrentScreenに応じて何かを実行する場合としない場合があります）。

注：getCurrentRouteName()がどこにあるかわからないため、エラーが発生したため、使用せずに_action.routeName_を直接使用します。

https://github.com/react-community/react-navigation/issues/2371 および https://github.com/react-community/react-navigation/issues/を参照してください51＃issuecomment-323536642 詳細および議論。

1
Hendy Irawan