web-dev-qa-db-fra.com

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

J'explore les possibilités de React Native lors du développement d'une application de démonstration avec une navigation personnalisée entre les vues à l'aide de Navigator composant .

La classe principale de l'application rend le navigateur et à l'intérieur de renderScene renvoie 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 qu'en appuyant sur "aller au fil", renderScene est appelé plusieurs fois, bien que la vue s'affiche correctement une fois. Est-ce ainsi que l'animation fonctionne?

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

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

Ce que je veux réaliser est similaire à NavigatorIOS mais sans la barre de navigation (toutefois, certaines vues auront leur propre barre de navigation personnalisée).

javascriptiosnavigationreactjsreact-native
150
Kosmetika

Votre approche devrait bien fonctionner. Dans les grandes applications en Fb, nous évitons d'appeler la require() pour le composant scène jusqu'au rendu, ce qui peut économiser un peu de temps de démarrage.

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

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

72
Eric Vicenti

Navigator est obsolète dans RN 0.44.0 vous pouvez utiliser react-native-deprecated-custom-components au lieu de supporter votre application existante qui utilise Navigator.

3
Vivek Maru

Le composant Navigator est obsolète maintenant. Vous pouvez utiliser react-native-router-flux de askonov, il est très varié et prend en charge de nombreuses animations différentes et est efficace.

1
Divye Shah

Comme d'autres l'ont déjà mentionné, Navigator est obsolète depuis la version 0.44, mais peut toujours être importé pour prendre en charge des applications plus anciennes:

Navigator a été supprimé du noyau React Package natif dans la version 0.44. Le module a été déplacé vers un package react-native-custom-components pouvant être importé par votre application afin de maintenir la compatibilité avec les versions antérieures.

Pour voir les documents d'origine de Navigator, veuillez basculer vers une version plus ancienne des documents.

Selon la documentation (React Native v0.54) Navigation entre les écrans . Il est maintenant recommandé d'utiliser Navigation React si vous commencez tout juste à démarrer, ou NavigatorIOS pour les applications non-Android

Si vous commencez tout juste à vous familiariser avec la navigation, vous souhaiterez probablement utiliser la navigation par réaction . React Navigation fournit une solution de navigation facile à utiliser, avec la possibilité de présenter la navigation sur pile et les modèles de navigation à onglets communs sur iOS et Android.

...

Si vous ne ciblez que iOS, vous pouvez également choisir NavigatorIOS comme moyen de fournir une apparence et une convivialité natives avec une configuration minimale. fournit un wrapper autour de la classe UINavigationController native.

[~ # ~] nb [~ # ~] : Au moment de fournir cette réponse, React Native était à la version 0.54

1
JSON C11