Navigation personnalisée avec le composant Navigator dans React-Native

J'explore les possibilités de React Native tout en développant une application de démonstration avec une navigation personnalisée entre les vues à l'aide d'un Navigatorcomposant .

La classe d'application principale rend le navigateur et l'intérieur renderSceneretourne le composant passé:

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

Pour l'instant, l'application contient deux vues:

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

Ce que je veux comprendre, c'est:

• Je vois dans les journaux que lorsque vous appuyez sur "aller à l'alimentation" renderSceneest appelé plusieurs fois bien que la vue s'affiche correctement une fois. Est-ce ainsi que fonctionne l'animation?

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

• En général, mon approche est-elle conforme à la méthode React, ou peut-elle être améliorée?

Ce que je veux réaliser, c'est quelque chose de similaire NavigatorIOSmais sans la barre de navigation (cependant, certaines vues auront leur propre barre de navigation personnalisée).

Votre approche devrait très bien fonctionner. Dans les grandes applications de Fb, nous évitons d'appeler le require()composant de scène jusqu'à ce que nous le rendions, ce qui peut gagner un peu de temps au démarrage.

La renderScenefonction doit être appelée lorsque la scène est envoyée pour la première fois dans le navigateur. Il sera également appelé pour la scène active lorsque le navigateur sera de nouveau rendu. Si vous voyez renderSceneêtre appelé plusieurs fois après un push, c'est probablement un bogue.

Le navigateur est toujours en cours de travail, mais si vous rencontrez des problèmes, veuillez le déposer sur github et me taguer! (@ericvicenti)

Navigatorest désormais obsolète car RN 0.44.0vous pouvez l'utiliser à la react-native-deprecated-custom-componentsplace pour prendre en charge votre application existante qui utilise Navigator.

Comme d'autres l'ont mentionné précédemment, Navigator est obsolète depuis la v0.44, mais peut toujours être importé pour prendre en charge des applications plus anciennes:

Navigator a été supprimé du package principal React Native dans la version 0.44. Le module a été déplacé vers un package react-native-custom-components qui peut être importé par votre application afin de maintenir la compatibilité descendante.

Pour voir les documents originaux de Navigator, veuillez passer à une version plus ancienne des documents.

Selon les docs (React Native v0.54) Naviguer entre les écrans . Il est maintenant recommandé d'utiliser React Navigation si vous ne faites que commencer, ou NavigatorIOS pour les applications non Android

Si vous ne faites que commencer avec la navigation, vous souhaiterez probablement utiliser React Navigation . React Navigation fournit une solution de navigation facile à utiliser, avec la possibilité de présenter une navigation commune dans la pile et des modèles de navigation par onglets sur iOS et Android.

...

Si vous ciblez uniquement iOS, vous voudrez peut-être également consulter NavigatorIOS comme moyen de fournir une apparence native avec une configuration minimale, car il fournit un wrapper autour de la classe UINavigationController native.

NB : Au moment de fournir cette réponse, React Native était à la version 0.54

Le composant Navigator est désormais obsolète. Vous pouvez utiliser react-native-router-flux par askonov, il a une grande variété et prend en charge de nombreuses animations différentes et est efficace