Javascript 在 React-Native 中使用 Navigator 组件自定义导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29335523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom navigation with Navigator component in React-Native
提问by Kosmetika
I'm exploring possibilities of React Nativewhile developing a demo app with custom navigation between views with the help of Navigatorcomponent.
我正在探索React Native 的可能性，同时在Navigatorcomponent的帮助下开发具有视图之间自定义导航的演示应用程序。
The main app class renders navigator and inside renderScenereturns passed 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 });
}
}}
/>
);
}
}
For now app contains two views:
目前应用程序包含两个视图：
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>
);
}
}
What I want to figure out is:
我想弄清楚的是：
I see in the logs that when pressing “go to feed”
renderSceneis called several times though the view renders correctly once. Is it how the animation works?index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed ViewGenerally does my approach conform to the React way, or can it be done better?
我在日志中看到，
renderScene虽然视图正确呈现一次，但按下“转到提要”时会多次调用。动画是这样工作的吗？index.ios.js:57 Object {name: 'WelcomeView', component: function} index.ios.js:57 Object {name: 'FeedView', component: function} // renders Feed View通常我的方法是否符合 React 的方式，还是可以做得更好？
What I want to achieve is something similar to NavigatorIOSbut without the navigation bar (however some views will have their own custom navigation bar).
我想要实现的是类似于NavigatorIOS但没有导航栏的东西（但是有些视图会有自己的自定义导航栏）。
采纳答案by Eric Vicenti
Your approach should work great. In big apps at Fb, we avoid calling the require()for the scene component until we render it, which can save a bit of start-up time.
你的方法应该很有效。在 Fb 的大型应用程序中，我们避免在require()渲染场景组件之前调用它，这可以节省一些启动时间。
The renderScenefunction should be called when the scene is first pushed to the Navigator. It will also be called for the active scene when the Navigator gets re-rendered. If you see renderSceneget called multiple times after a push, then it is probably a bug.
renderScene当场景首次推送到导航器时，应调用该函数。当导航器被重新渲染时，它也将被调用以用于活动场景。如果您看到renderScene在 apush之后多次调用 get ，那么它可能是一个错误。
The navigator is still a work in progress, but if you find any problems with it please file on github and tag me! (@ericvicenti)
导航器仍在开发中，但如果您发现它有任何问题，请在 github 上归档并标记我！(@ericvicenti)
回答by Vivek Maru
Navigatoris deprecated now in RN 0.44.0you can use react-native-deprecated-custom-componentsinstead to support your existing application that is using Navigator.
Navigator现在已弃用，RN 0.44.0您可以react-native-deprecated-custom-components改用它来支持使用Navigator.
回答by JSON C11
As others have previously mentioned, Navigator has been deprecated since v0.44, but can still be imported to support older applications:
正如其他人之前提到的，Navigator 自 v0.44 以来已被弃用，但仍可以导入以支持旧应用程序：
Navigator has been removed from the core React Native package in version 0.44. The module has been moved to a react-native-custom-componentspackage that can be imported by your application in order to maintain backwards compatibility.
To see the original docs for Navigator, please switch to an older version of the docs.
Navigator 已从 0.44 版的核心 React Native 包中删除。该模块已移至 react-native-custom-components包，可以由您的应用程序导入，以保持向后兼容性。
要查看 Navigator 的原始文档，请切换到旧版本的文档。
As per the docs (React Native v0.54) Navigating Between Screens. It is now recommended to use React Navigationif you are just getting started, or NavigatorIOSfor non-Android applications
根据文档（React Native v0.54）在屏幕之间导航。如果你刚开始，现在建议使用React Navigation，或者非 Android 应用程序使用NavigatorIOS
If you are just getting started with navigation, you will probably want to use React Navigation. React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android.
...
If you're only targeting iOS, you may want to also check out NavigatorIOSas a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class.
如果您刚刚开始使用导航，您可能想要使用React Navigation。React Navigation 提供了一个易于使用的导航解决方案，能够在 iOS 和 Android 上呈现常见的堆栈导航和选项卡式导航模式。
...
如果您只针对 iOS，您可能还想查看NavigatorIOS作为一种以最少配置提供本机外观和感觉的方式，因为它提供了本机 UINavigationController 类的包装器。
NB: At the time of providing this answer, React Native was at version 0.54
注意：在提供此答案时，React Native 的版本为 0.54
回答by Divye Shah
Navigator component is deprecated now. You could use react-native-router-flux by askonov, it has a huge variety and supports many different animations and is efficient
现在不推荐使用导航器组件。你可以使用 askonov 的 react-native-router-flux，它种类繁多，支持许多不同的动画，而且效率很高
