Niestandardowa nawigacja z komponentem Navigator w React-Native

Badam możliwości React Native podczas tworzenia aplikacji demonstracyjnej z niestandardową nawigacją między widokami za pomocą Navigatorkomponentu .

Główna klasa aplikacji renderuje nawigatora, a wewnątrz renderScenezwraca przekazany komponent:

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

Na razie aplikacja zawiera dwa widoki:

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

Chcę dowiedzieć się:

• Widzę w dziennikach, że po naciśnięciu przycisku „przejdź do kanału” renderScenejest wywoływane kilka razy, chociaż widok renderuje się poprawnie raz. Czy tak działa animacja?

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

• Ogólnie rzecz biorąc, czy moje podejście jest zgodne ze sposobem Reacta, czy można to zrobić lepiej?

Chcę osiągnąć coś podobnego, NavigatorIOSale bez paska nawigacji (jednak niektóre widoki będą miały własny niestandardowy pasek nawigacji).

Twoje podejście powinno działać świetnie. W dużych aplikacjach na Fb unikamy wywoływania require()komponentu dla sceny, dopóki go nie wyrenderujemy, co może zaoszczędzić trochę czasu uruchamiania.

renderSceneFunkcja powinna zostać wywołana, gdy scena jest najpierw popychane do Nawigatora. Będzie również wywoływana dla aktywnej sceny, gdy Nawigator zostanie ponownie wyrenderowany. Jeśli widzisz, renderSceneże dzwoniono wiele razy po a push, prawdopodobnie jest to błąd.

Nawigator wciąż jest w toku, ale jeśli znajdziesz jakieś problemy, napisz na github i oznacz mnie! (@ericvicenti)

Navigatorjest przestarzałe w programie, RN 0.44.0którego możesz użyć react-native-deprecated-custom-componentsdo obsługi istniejącej aplikacji, która używa Navigator.

Jak wspominali inni, Navigator stał się przestarzały od wersji 0.44, ale nadal można go importować do obsługi starszych aplikacji:

Navigator został usunięty z podstawowego pakietu React Native w wersji 0.44. Moduł został przeniesiony do pakietu react-native-custom-components , który może być importowany przez twoją aplikację w celu zachowania kompatybilności wstecznej.

Aby zobaczyć oryginalne dokumenty dla Navigatora, przełącz się na starszą wersję dokumentów.

Zgodnie z dokumentacją (React Native v0.54) Nawigacja między ekranami . Zaleca się teraz używanie React Navigation, jeśli dopiero zaczynasz, lub NavigatorIOS dla aplikacji innych niż Android

Jeśli dopiero zaczynasz korzystać z nawigacji, prawdopodobnie zechcesz skorzystać z funkcji React Navigation . React Navigation zapewnia łatwe w użyciu rozwiązanie nawigacyjne, z możliwością prezentowania typowych wzorców nawigacji stosu i nawigacji w kartach zarówno w systemie iOS, jak i Android.

...

Jeśli celujesz tylko w system iOS, możesz również wypróbować NavigatorIOS jako sposób na zapewnienie natywnego wyglądu przy minimalnej konfiguracji, ponieważ zapewnia otokę wokół natywnej klasy UINavigationController.

NB : W momencie udzielania tej odpowiedzi, React Native był w wersji 0.54

Komponent Navigator jest obecnie przestarzały. Możesz użyć react-native-router-flux przez askonov, ma ogromną różnorodność i obsługuje wiele różnych animacji i jest wydajny