Benutzerdefinierte Navigation mit Navigator-Komponente in React-Native

Ich erkunde die Möglichkeiten von React Native, während ich eine Demo-App mit benutzerdefinierter Navigation zwischen Ansichten mithilfe von NavigatorKomponenten entwickle .

Die Haupt-App-Klasse rendert den Navigator und renderScenegibt die übergebene Komponente zurück:

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 });
                    }
                }}
             />
        );
    }
}

Im Moment enthält die App zwei Ansichten:

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>
        );
    }
}

Was ich herausfinden möchte, ist:

• Ich sehe in den Protokollen, dass beim Drücken von "Gehe zu Feed" renderScenemehrmals aufgerufen wird, obwohl die Ansicht einmal korrekt gerendert wird. Funktioniert die Animation so?

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

• Entspricht mein Ansatz im Allgemeinen dem React-Weg oder kann er besser durchgeführt werden?

Was ich erreichen möchte, ist etwas Ähnliches, NavigatorIOSjedoch ohne Navigationsleiste (einige Ansichten haben jedoch eine eigene benutzerdefinierte Navigationsleiste).

Ihr Ansatz sollte großartig funktionieren. In großen Apps bei Fb vermeiden require()wir es, die for the scene-Komponente aufzurufen, bis wir sie rendern, was ein wenig Startzeit sparen kann.

Die renderSceneFunktion sollte aufgerufen werden, wenn die Szene zum ersten Mal in den Navigator verschoben wird. Es wird auch für die aktive Szene aufgerufen, wenn der Navigator neu gerendert wird. Wenn Sie sehen, renderScenedass Sie nach a mehrmals aufgerufen werden push, handelt es sich wahrscheinlich um einen Fehler.

Der Navigator ist noch in Arbeit, aber wenn Sie Probleme damit haben, melden Sie sich bitte bei github an und markieren Sie mich! (@ericvicenti)

Navigatorist jetzt veraltet in können RN 0.44.0Sie react-native-deprecated-custom-componentsstattdessen verwenden, um Ihre vorhandene Anwendung zu unterstützen, die verwendet wird Navigator.

Wie bereits erwähnt, ist Navigator seit Version 0.44 veraltet, kann jedoch weiterhin importiert werden, um ältere Anwendungen zu unterstützen:

Navigator wurde in Version 0.44 aus dem React Native-Kernpaket entfernt. Das Modul wurde in ein Paket mit reaktionsnativen benutzerdefinierten Komponenten verschoben, das von Ihrer Anwendung importiert werden kann, um die Abwärtskompatibilität zu gewährleisten.

Um die Originaldokumente für Navigator anzuzeigen, wechseln Sie bitte zu einer älteren Version der Dokumente.

Gemäß den Dokumenten (React Native v0.54) Navigieren zwischen Bildschirmen . Es wird jetzt empfohlen, React Navigation zu verwenden, wenn Sie gerade erst anfangen, oder NavigatorIOS für Nicht-Android-Anwendungen

Wenn Sie gerade erst mit der Navigation beginnen, möchten Sie wahrscheinlich React Navigation verwenden . React Navigation bietet eine benutzerfreundliche Navigationslösung mit der Möglichkeit, allgemeine Stapelnavigation und Navigationsmuster mit Registerkarten sowohl auf iOS als auch auf Android darzustellen.

...

Wenn Sie nur auf iOS abzielen, sollten Sie auch NavigatorIOS ausprobieren, um ein natives Erscheinungsbild mit minimaler Konfiguration bereitzustellen, da es einen Wrapper um die native UINavigationController-Klasse bietet.

NB : Zum Zeitpunkt der Bereitstellung dieser Antwort war React Native auf Version 0.54 eingestellt

Die Navigator-Komponente ist jetzt veraltet. Sie könnten React-Native-Router-Flux von askonov verwenden, es hat eine große Vielfalt und unterstützt viele verschiedene Animationen und ist effizient