React-Native – 使用Navigator组件自定义导航
我正在探索React Native的可能性，同时在Navigator组件的帮助下开发一个在视图之间自定义导航的演示应用程序 – http://facebook.github.io/react-native/docs/navigator.html#content
主应用程序类呈现导航器，并在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多次调用，虽然视图正确呈现一次。 animation是如何工作的？index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View -
通常我的方法是否符合React方法，还是可以做得更好？
我想要实现的是类似NavigatorIOS但没有导航栏（但有些意见将有自己的自定义导航栏）。
你的方法应该很好。 在Fb的大应用程序中，我们避免调用场景组件的require() ，直到我们渲染它，这可以节省一些启动时间。
当场景首次被推送到导航器时，应该调用renderScene函数。 当导航器重新渲染时，它也将被调用为活动场景。 如果您在push后看到renderScene被多次调用，那么这可能是一个错误。
导航仪仍在进行中，但是如果您发现任何问题，请在github上进行归档并加上标签！ （@ericvicenti）
现在在RN 0.44.0不推荐使用Navigator ，您可以使用react-native-deprecated-custom-components来支持使用Navigator现有应用程序。
