React-Nativeのナビゲーターコンポーネントによるカスタムナビゲーション

コンポーネントの助けを借りてビュー間のカスタムナビゲーションを備えたデモアプリを開発しながら、React Nativeの可能性を探ってい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と、ビューが1回正しくレンダリングされますが、ログが数回呼び出されることがログでわかります。それはアニメーションがどのように機能するのですか？

  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関数は、シーンが最初にナビゲーターにプッシュされたときに呼び出す必要があります。ナビゲーターが再レンダリングされるときに、アクティブなシーンに対しても呼び出されます。のrenderScene後に複数回呼び出される場合pushは、おそらくバグです。

ナビゲーターはまだ開発中ですが、問題が見つかった場合はgithubにファイルしてタグを付けてください！（@ericvicenti）

Navigatorは非推奨になりましたRN 0.44.0。react-native-deprecated-custom-components代わりにを使用して、を使用している既存のアプリケーションをサポートできますNavigator。

他の人が以前に言及したように、ナビゲーターはv0.44以降廃止されましたが、古いアプリケーションをサポートするために引き続きインポートできます。

Navigatorは、バージョン0.44のコアReact Nativeパッケージから削除されました。モジュールは、 下位互換性を維持するためにアプリケーションでインポートできるreact-native-custom-componentsパッケージに移動されました。

ナビゲーターの元のドキュメントを表示するには、ドキュメントの古いバージョンに切り替えてください。

ドキュメント（React Native v0.54）Navigating Between Screensに従って。始めたばかりの場合はReact Navigationを、Android以外のアプリケーションの場合はNavigatorIOSを使用することをお勧めします

ナビゲーションを始めたばかりの場合は、おそらくReact Navigationを使用することをお勧めします。React Navigationは使いやすいナビゲーションソリューションを提供し、iOSとAndroidの両方で共通のスタックナビゲーションとタブ付きナビゲーションパターンを提示する機能を備えています。

...

iOSのみを対象としている場合 、ネイティブのUINavigationControllerクラスのラッパーを提供するため、最小限の構成でネイティブのルックアンドフィールを提供する方法としてNavigatorIOSもチェックすることをお勧めします。

注意：この回答を提供した時点では、React Nativeはバージョン0.54でした。

ナビゲーターコンポーネントは非推奨になりました。askonovによるreact-native-router-fluxを使用できます。それは非常に多様で、多くの異なるアニメーションをサポートし、効率的です。