[解決済み] React-NativeのNavigatorコンポーネントを使ったカスタムナビゲーション

質問

の可能性を探っています。 リアクトネイティブ の助けを借りて、ビュー間のカスタムナビゲーションを行うデモアプリを開発中です。 Navigator コンポーネント .

メインアプリのクラスは、ナビゲータとその内部をレンダリングします。 renderScene 渡されたコンポーネントを返します。

class App extends React.Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'WelcomeView', component: WelcomeView}}
                configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    // count the number of func calls
                    console.log(route, navigator); 

                    if (route.component) {
                        return React.createElement(route.component, { navigator });
                    }
                }}
             />
        );
    }
}

今のところ、アプリには2つのビューが含まれています。

class FeedView extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>
                    Feed View!
                </Text>
            </View>
        );
    }
}

class WelcomeView extends React.Component {
    onPressFeed() {
        this.props.navigator.push({
            name: 'FeedView',
            component: FeedView
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome View!
                </Text>

                <Text onPress={this.onPressFeed.bind(this)}>
                    Go to feed!
                </Text>
            </View>
        );
    }
}

私が解明したいのは

• ログを見ると、"フィードに移動 "を押したときに renderScene が何度も呼び出されますが、ビューは一度だけ正しくレンダリングされます。これは、アニメーションの仕組みなのでしょうか？

  index.ios.js:57 Object {name: 'WelcomeView', component: function}
  index.ios.js:57 Object {name: 'FeedView', component: function}
  // renders Feed View
  
  

• 一般的に、私のアプローチはReactの方法に準拠しているか、あるいはもっとうまくできるか？

私が実現したいのは、次のようなものです。 NavigatorIOS しかし、ナビゲーションバーはありません（ただし、一部のビューには独自のカスタムナビゲーションバーがあります）。

解決方法は？

あなたのアプローチはうまくいくはずです。Fbの大規模なアプリでは、私たちは require() をレンダリングするまで、シーン コンポーネントのために使用することで、起動時間を少し短縮することができます。

は renderScene 関数は、シーンが最初にナビゲータにプッシュされたときに呼び出される必要があります。また、Navigatorが再レンダリングされる際にも、アクティブなシーンに対してこの関数が呼び出されます。もし renderScene の後に何度も呼び出されます。 push であれば、それはおそらくバグでしょう。

ナビゲーターはまだ未完成ですが、もし何か問題を見つけたら、githubにファイルして、私にタグ付けしてください! (@ericvicenti)