componentを使用してビュー間のカスタム ナビゲーションを備えたデモ アプリを開発しながら、 React Nativeの可能性を探っていNavigatorます。
メイン アプリ クラスはナビゲーターをレンダリングし、内部でrenderSceneは渡されたコンポーネントを返します。
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 });
}
}}
/>
);
}
}
今のところ、アプリには 2 つのビューが含まれています。
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>
);
}
}
私が理解したいのは：
ログを見ると、「フィードに移動」を押す
renderSceneと、ビューが 1 回正しくレンダリングされるにもかかわらず、複数回呼び出されることがわかります。それはアニメーションの仕組みですか？index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View一般的に、私のアプローチは React の方法に準拠していますか、それともより適切に行うことができますか?
私が達成したいのはNavigatorIOS、ナビゲーションバーのないものと似ています (ただし、一部のビューには独自のカスタムナビゲーションバーがあります)。