web-dev-qa-db-ja.com

React-NativeのNavigatorコンポーネントを使用したカスタムナビゲーション

Navigator component を使用して、ビュー間のカスタムナビゲーションを備えたデモアプリを開発しながら、 React Native の可能性を探っています。

メインアプリクラスはナビゲータをレンダリングし、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>
        );
    }
}

私が理解したいのは：

  • ログを見ると、「go to feed」を押すと、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 に似ていますが、ナビゲーションバーはありません（ただし、一部のビューには独自のカスタムナビゲーションバーがあります）。

javascriptiosnavigationreactjsreact-native
150
Kosmetika

あなたのアプローチはうまくいくはずです。 Fbの大きなアプリでは、レンダリングするまでシーンコンポーネントのrequire()を呼び出さないようにします。これにより、起動時間が少し短縮されます。

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

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

72
Eric Vicenti

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

3
Vivek Maru

Navigatorコンポーネントは廃止されました。 askonovのreact-native-router-fluxを使用できます。多種多様で、多くの異なるアニメーションをサポートし、効率的です

1
Divye Shah

他の人が以前に述べたように、Navigatorはv0.44から非推奨になりましたが、古いアプリケーションをサポートするためにインポートすることができます。

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

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

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

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

...

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

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

1
JSON C11