我正在开发React应用程序时探索React Native的可能性,并借助Navigator
component在视图之间进行自定义导航。
主应用程序类呈现导航器,并在内部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
虽然视图正确渲染一次,但按“转到菜单”时会多次调用。动画是如何工作的?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
首次将场景推送到导航器时应调用该函数。当导航器重新渲染时,也将为活动场景调用该视图。如果您renderScene
在之后看到多次被调用push
,则可能是一个错误。
导航器仍在开发中,但是如果发现任何问题,请在github上归档并标记我!(@ericvicenti)
Navigator
现在已弃用,RN 0.44.0
您可以react-native-deprecated-custom-components
改用来支持正在使用的现有应用程序Navigator
。
正如其他人之前提到的那样,自v0.44起不推荐使用Navigator,但仍可以将其导入以支持较旧的应用程序:
Navigator已从0.44版的核心React Native软件包中删除。该模块已移至
react-native-custom-components软件包,您的应用程序可以导入该软件包,以保持向后兼容性。要查看Navigator的原始文档,请切换到旧版本的文档。
根据docs(React Native v0.54)在屏幕之间导航。现在,如果您刚刚入门,建议使用React Navigation;对于非Android应用程序,则建议使用NavigatorIOS
如果您刚开始使用导航,则可能需要使用React Navigation。React Navigation提供了一个易于使用的导航解决方案,能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式。
...
如果您仅针对iOS,则可能还需要签出NavigatorIOS
,以最少的配置提供本机外观,因为它提供了本机UINavigationController类的包装。
注意:在提供此答案时,React Native的版本为0.54
现在不推荐使用Navigator组件。您可以使用askonov的react-native-router-flux,它种类繁多,支持许多不同的动画,并且效率很高
文章标签:ios , javascript , navigation , react-native , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!