Navigazione personalizzata con componente Navigator in React-Native


158

Sto esplorando le possibilità di React Native durante lo sviluppo di un'app demo con navigazione personalizzata tra le visualizzazioni con l'aiuto del Navigatorcomponente .

La classe di app principale esegue il rendering del navigatore e all'interno renderScenerestituisce il componente passato:

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

Per ora l'app contiene due visualizzazioni:

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

Quello che voglio capire è:

  • Vedo nei registri che quando si preme "vai al feed" renderSceneviene chiamato più volte anche se la vista viene visualizzata correttamente una volta. È come funziona l'animazione?

    index.ios.js:57 Object {name: 'WelcomeView', component: function}
    index.ios.js:57 Object {name: 'FeedView', component: function}
    // renders Feed View
  • Generalmente il mio approccio è conforme al modo React o può essere fatto meglio?

Quello che voglio ottenere è qualcosa di simile NavigatorIOSma senza la barra di navigazione (tuttavia alcune viste avranno la propria barra di navigazione personalizzata).


1
@ericvicenti questo esempio dovrebbe essere incluso nella pagina Navigator nei documenti. È più completo e offre un quadro migliore di come utilizzare il componente Navigator nel contesto.
greatwitenorth

Solo provando il tuo esempio, la scena dovrebbe cambiare automaticamente quando si verifica una spinta del navigatore? Per me il tuo esempio non mostra mai la Visualizzazione feed! testo, quindi mi chiedo se qualcosa è cambiato con le versioni recenti.
Ian,

Risposte:


74

Il tuo approccio dovrebbe funzionare alla grande. Nelle grandi app su Fb, evitiamo di chiamare il require()componente per la scena fino a quando non lo eseguiamo il rendering, il che può risparmiare un po 'di tempo di avvio.

La renderScenefunzione deve essere chiamata quando la scena viene prima spinta sul Navigatore. Verrà anche chiamato per la scena attiva quando il Navigator viene ridistribuito. Se vedi renderSceneessere chiamato più volte dopo un push, allora probabilmente è un bug.

Il navigatore è ancora in fase di elaborazione, ma se riscontri problemi con esso, ti preghiamo di archiviare su github e taggarmi! (@Ericvicenti)


1
Ciao @Eric, dai un'occhiata a questo link: - stackoverflow.com/questions/44538306/…
sid

2

Navigatorè deprecato ora in RN 0.44.0è possibile utilizzare react-native-deprecated-custom-componentsinvece per supportare l'applicazione esistente che sta utilizzando Navigator.


1

Come altri hanno già menzionato, Navigator è stato deprecato dalla v0.44, ma può ancora essere importato per supportare applicazioni meno recenti:

Navigator è stato rimosso dal pacchetto principale di React Native nella versione 0.44. Il modulo è stato spostato in un pacchetto di reagenti nativi personalizzati che può essere importato dall'applicazione per mantenere la compatibilità con le versioni precedenti.

Per visualizzare i documenti originali per Navigator, passa a una versione precedente dei documenti.

Secondo i documenti (React Native v0.54) Navigazione tra schermate . Si consiglia ora di utilizzare React Navigation se si è appena iniziato o NavigatorIOS per applicazioni non Android

Se stai appena iniziando con la navigazione, probabilmente vorrai utilizzare React Navigation . React Navigation offre una soluzione di navigazione facile da usare, con la possibilità di presentare schemi di navigazione stack e schede comuni sia su iOS che su Android.

...

Se ti rivolgi solo a iOS, potresti anche voler consultare NavigatorIOS come un modo per fornire un aspetto nativo con una configurazione minima, in quanto fornisce un wrapper attorno alla classe UINavigationController nativa.

NB : Al momento di fornire questa risposta, React Native era alla versione 0.54


0

Il componente Navigator ora è obsoleto. Potresti usare reagire-nativo-router-flusso da askonov, ha una grande varietà e supporta molte animazioni diverse ed è efficiente

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.