web-dev-qa-db-ja.com

React Native、Redux、およびNavigatorでナビゲートする適切な方法

React Reduxフレームワークを使用するネイティブアプリがあり、Navigatorコンポーネントを使用してナビゲーションを処理しています。ナビゲーションを機能させるのに少し苦労しましたが、できません。正しく行う方法の良い例を見つけるために、私はいくつかの助けと説明を探しています。

ここに私が現在持っているものの要点がありますが、それは機能していますが、私がそれを正しくやっているかどうかわかりません：

ルートコンポーネント

...
renderScene(route, navigator) {
    console.log('RENDER SCENE', route);
    const Component = route.component;
    return (
        <Component navigator={navigator} route={route} {...this.props} />
    )
}

render() {
    return (
        <Navigator
            renderScene={(route, nav) => this.renderScene(route, nav)}
            initialRoute={{ name: 'Signin', component: Signin }} />
    )
}

サインインコンポーネント

...
componentWillReceiveProps(nextProps) {
    if (!this.props.signedIn && nextProps.signedIn) {
        console.log('PUSHING TO MAIN');
        nextProps.navigator.Push({ name: 'Main', component: Main });
    }
}

質問：

1：ここで最初に考えたのは、おそらくnavigator.Pushアクションへのコード。ただし、componentWillReceivePropsはアクションを呼び出すのに適切な場所ですか？ Signinコンポーネントがロードされると、すでにアクティブなセッションがある場合、ユーザーにサインインするアクションが起動します。デフォルトではサインインされていないため、次の小道具が届くと、変更されたかどうかを確認し、Mainにプッシュします。

2：「Push TO MAIN」が記録された直後のコンソールログには、2つの「RENDER SCENE」ログが表示されます。

[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (EXPECTED)
[info] 'PUSHING TO MAIN'
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (WHY?)
[info] 'RENDER SCENE', { name: 'Main', component: [Function: Main] }

Signinコンポーネントのみをプッシュしている場合、RENDER SCENEが2回呼び出される理由（最初のものはMainコンポーネントです）に興味があります。

また、最初はcomponentWillReceivePropsメソッドでチェックしていました：

if (nextProps.signedIn) {
    nextProps.navigator.Push({ name: 'Main', component: Main });
}

しかし、これによりMainコンポーネントが2回プッシュされました。

iosreactjsreact-nativeredux
29
Denny Ferrassoli

注：著者が提案したコメント react-native-router-flux は、同じ著者によるもので、以下のGitHubリンクは廃止されました。

新しいコンポーネント でReduxのサポートを追加しました。https：//github.com/aksonov/react-native-redux-router with makes Actions.loginを呼び出すなど、ナビゲーションは非常に簡単です。

10
aksonov

これは、reduxの実装ではありませんが、ルーティングにはreact-native-router-fluxが本当に役立つことがわかりました。

あなたは電話のようなことをすることができます

Actions.login

ログインビューに移動します。ルートはインデックスファイルで定義され、navbar要素を定義するオプションのスキーマがあります。

https://github.com/aksonov/react-native-router-flux

3
ithinkiknowruby

1）はい、メソッドに移動します。componentWillReceivePropsはおそらく正しくありません。そのコンポーネントのメソッドからそのロジックを持たないため、その部分をリファクタリングすることは困難です。つまり、signinCompは、認証セッションがあるかどうかの状態を受け取る必要があります（そしてそれ自体を把握していません）。理由もなく処理されることになります。彼がログインしている場合はリダイレクトするからです。私は個人的にrenderSceneでチェックを行います。navが渡されるので、子コンポーネントでプッシュ/ポップを行い、1つのrenderSceneですべてのロジックを処理できます。

2）カードのデッキのようなナビゲーションスタックを参照してください。シーンを設定すると1枚のカードになりますが、プッシュすると別のカードが山に追加されます。したがって、プッシュして2枚のカードがある場合、すべてのカードが表向きでレンダリングされていることを確認して、押したり戻したりすると完成したカードまたはシーンに戻るようにします。すぐに5つのシーンをスタックにプッシュすることを想像してください。したがって、スタックを変更すると、すべてがレンダリングされ、その戻るボタンの準備ができていることを確認するためにチェックされます。個人的には、その最適なものは見つかりません（ただし、プッシュするシーンごとに異なるプロパティを渡すことができるため、そうする必要があります）。

この行をおそらく次のように変更できます。

    renderScene={this.renderScene}
2
Tjorriemorrie

質問1：
以下のように、shouldComponentUpdateメソッドでナビゲータロジックを処理することをお勧めします。

   shouldComponentUpdate(nextProps, nextState){

    if(nextProps.isLoggedIn != this.props.isLoggedIn && nextProps.isLoggedIn === true){
        //will redirect
        // do redirect option

        return false;
    }

    return true;
}

質問2：
これは反応ネイティブのバグだと思います。

0
deju