使用React-Native中的Navigator组件进行自定义导航
我正在探索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 });
}
}}
/>
);
}
}目前，app包含两个视图：
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>
);
}
}我想弄清楚的是：
- 我在日志中看到，当按下“go to feed”时，
renderScene被调用了几次，尽管视图只正确呈现了一次。这是动画的工作原理吗？
index.ios.js:57 Object {name：'WelcomeView'，component: function} FeedView Object {name：'FeedView'，component: function} //呈现Feed View
- 我的方法通常是否符合React方式，或者是否可以做得更好？
我想要实现的是类似于NavigatorIOS的东西，但是没有导航栏(但是有些视图会有自己的自定义导航栏)。
回答 4
Stack Overflow用户
发布于 2015-05-02 10:19:20
你的方法应该工作得很好。在Fb的大型应用程序中，我们避免调用场景组件的require()，直到我们渲染它，这可以节省一点启动时间。
首次将场景推送到导航器时，应调用renderScene函数。在重新渲染导航器时，也会为活动场景调用它。如果您看到在push之后多次调用renderScene，那么这可能是一个bug。
导航器仍在开发中，但如果你发现它有任何问题，请在github上提交并标记我！(@ericvicenti)
Stack Overflow用户
发布于 2017-08-29 15:32:30
在RN 0.44.0中，Navigator现在已被弃用，您可以使用react-native-deprecated-custom-components来支持使用Navigator的现有应用程序。
Stack Overflow用户
发布于 2018-04-01 08:52:58
正如其他人之前提到的，Navigator从0.44版本开始就被弃用了，但仍然可以导入以支持较旧的应用程序：
导航器已从0.44版的核心React Native包中删除。该模块已移动到可由您的应用程序导入的react-native-custom-components包中，以保持向后兼容性。
若要查看Navigator的原始文档，请切换到旧版本的文档。
根据文档(React Native v0.54) Navigating Between Screens。现在，如果您刚刚开始，建议使用React Navigation，或者对于非Android应用程序使用NavigatorIOS。
如果您刚刚开始使用导航，则可能需要使用React
。React导航提供了一个易于使用的导航解决方案，能够在iOS和安卓上呈现常见的堆栈导航和选项卡式导航模式。
..。
如果您只针对iOS，您可能还想查看NavigatorIOS，作为一种使用最少配置提供本机外观的方法，因为它为本机UINavigationController类提供了一个包装器。
NB：在提供此答案时，React Native的版本为0.54
https://stackoverflow.com/questions/29335523
复制相似问题
腾讯云开发者
