it-swarm.com.de

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 Navigator component entwickle.

Die Haupt-App-Klasse rendert den Navigator und gibt in renderScene 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 });
                    }
                }}
             />
        );
    }
}

Die App enthält vorerst 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 "go to feed" renderScene mehrmals 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 meine Vorgehensweise im Allgemeinen der React oder kann sie besser durchgeführt werden?

Was ich erreichen möchte, ist etwas Ähnliches wie NavigatorIOS , aber ohne die Navigationsleiste (jedoch haben einige Ansichten ihre eigene benutzerdefinierte Navigationsleiste).

150
Kosmetika

Ihr Ansatz sollte großartig funktionieren. In großen Apps bei Fb vermeiden wir den Aufruf von require() für die Szenenkomponente, bis wir sie rendern, was ein bisschen Startzeit sparen kann.

Die Funktion renderScene 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, dass renderScene nach einem Push mehrmals aufgerufen wird, 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 und markieren Sie mich! (@ericvicenti)

72
Eric Vicenti

Navigator ist jetzt veraltet in RN 0.44.0 Sie können react-native-deprecated-custom-components stattdessen, um Ihre vorhandene Anwendung zu unterstützen, die Navigator verwendet.

3
Vivek Maru

Die Navigatorkomponente ist jetzt veraltet. Sie können den reaktions-nativen-Router-Fluss von askonov verwenden. Er ist sehr vielfältig, unterstützt viele verschiedene Animationen und ist effizient

1
Divye Shah

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

Navigator wurde aus dem Core entfernt React Native package in Version 0.44. Das Modul wurde in ein react-native-custom-components -Paket verschoben, das von importiert werden kann Ihre Anwendung, 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, sollten Sie wahrscheinlich Navigation reagieren verwenden. React Navigation bietet eine benutzerfreundliche Navigationslösung mit der Möglichkeit, allgemeine Navigationsmuster für Stapel und Registerkarten auf iOS und Android darzustellen.

...

Wenn Sie nur auf iOS abzielen, sollten Sie auch NavigatorIOS ausprobieren, um ein natives Erscheinungsbild mit minimaler Konfiguration zu erzielen Stellt einen Wrapper für die native UINavigationController-Klasse bereit.

[~ # ~] nb [~ # ~] : Zum Zeitpunkt der Bereitstellung dieser Antwort war React Native in der Version 0.54

1
JSON C11