我正在探索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 });
}
}}
/>
);
}
}
现在应用程序包含两个视图：
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尽管视图正确渲染一次，但在按下“go to feed”时会调用多次。动画是这样工作的吗？index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View一般来说，我的方法符合 React 的方式，还是可以做得更好？
我想要实现的是类似于NavigatorIOS但没有导航栏的东西（但是有些视图会有自己的自定义导航栏）。