30

Redux フレームワークを使用する React Native アプリがあり、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 });
    }
}

質問:

navigator.push1: ここで最初に考えたのは、おそらくコードをアクションに移すべきだということです。しかし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 回プッシュされました。

4

4 に答える 4

10

注: 以下の GitHub リンクは非推奨になりました。コメントで、著者は同じ著者によるreact-native-router-fluxを提案しました。

新しいコンポーネントhttps://github.com/aksonov/react-native-redux-routerを使用して Redux のサポートを追加したところ、Actions.login を呼び出すなど、ナビゲーションが非常に簡単になります。

于 2015-11-23T15:57:20.217 に答える
2

1) はい、メソッドに移動しcomponentWillReceivePropsます。おそらく正しくありません。そのコンポーネントのそのメソッドからそのロジックがないため、その部分をリファクタリングするのは困難です。理由もなく処理されることにつながります。彼がログインしている場合はリダイレクトするためです。個人的には、renderScene でそのチェックを行います。nav が渡されるので、子コンポーネントでプッシュ/ポップを作成し、すべてのロジックを 1 つの renderScene で処理できます。

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

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

    renderScene={this.renderScene}
于 2015-10-11T07:33:17.557 に答える