Saya menjelajahi kemungkinan React Native sambil mengembangkan aplikasi demo dengan navigasi khusus antara tampilan dengan bantuan Navigatorkomponen .
Kelas aplikasi utama menjadikan navigator dan renderScenekomponen pengembalian di dalam berlalu:
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 });
}
}}
/>
);
}
}
Untuk saat ini aplikasi berisi dua tampilan:
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>
);
}
}
Yang ingin saya cari tahu adalah:
Saya melihat di log bahwa ketika menekan "pergi untuk memberi makan"
renderScenedisebut beberapa kali meskipun tampilan membuat dengan benar sekali. Apakah ini cara kerjanya?index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed ViewSecara umum apakah pendekatan saya sesuai dengan cara Bereaksi, atau dapatkah itu dilakukan dengan lebih baik?
Yang ingin saya capai adalah sesuatu yang mirip NavigatorIOStetapi tanpa bilah navigasi (namun beberapa tampilan akan memiliki bilah navigasi kustom sendiri).