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 ViewOgó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).
1
@ericvicenti ten przykład powinien znajdować się na stronie Nawigatora w dokumentacji. Jest bardziej kompletny i daje lepszy obraz tego, jak używać komponentu Navigator w kontekście.
—
greatwitenorth
Próbuję tylko twojego przykładu, czy scena powinna się automatycznie zmieniać, gdy nastąpi naciśnięcie nawigatora? Dla mnie twój przykład nigdy nie pokazuje widoku kanału! tekst, więc zastanawiam się, czy coś się zmieniło w ostatnich wersjach.
—
Ian