使用导航组件进行自定义导航

I'm exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component - http://facebook.github.io/react-native/docs/navigator.html#content

我正在探索React Native的可能性，同时在Navigator组件(http://facebook.github.io/反应物-native/docs/navigator.html#content)的帮助下，开发一个在视图之间具有自定义导航的演示应用程序

The main app class renders navigator and inside renderScene returns passed component:

主应用程序类呈现导航器，内渲染场景返回已传递的组件:

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 2 views:

目前app包含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>
        );
    }
}

What I want to figure out is -

我想弄明白的是-

I see in logs that when pressing "go to feed" renderScene is called several times though the view renders correctly once. Is it how the animation works?

我在日志中看到，当按下“go to feed”renderScene时，会多次调用renderScene，不过视图会正确呈现一次。这是动画的工作原理吗?
```
index.ios.js:57 Object {name: 'WelcomeView', component: function}
index.ios.js:57 Object {name: 'FeedView', component: function}
// renders Feed View
```
Generally does my approach conforms the React way, or it can be done better?

一般来说，我的方法符合反应方式，还是可以做得更好?

What I want to achieve is something similar to NavigatorIOS but without navigation bar (however some views will have their own custom navigation bar).

我想要实现的是类似于NavigatorIOS但没有导航栏的东西(不过有些视图会有自己的自定义导航栏)。

4 个解决方案

#1

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 renderScene function 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 renderScene get called multiple times after a push, then it is probably a bug.

当第一次将场景推到导航器时，应该调用renderScene函数。当导航器被重新渲染时，它也会被调用。如果您看到renderScene在一次推送之后被多次调用，那么它可能是一个bug。

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)

#2

Navigator is deprecated now in RN 0.44.0 you can use react-native-deprecated-custom-components instead to support your existing application that is using Navigator.

Navigator已经在RN 0.44.0中被弃用，您可以使用反应式本机-已弃用自定义组件来支持使用Navigator的现有应用程序。

#3

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设计的“反应堆-本机-路由-通量”，它有很大的多样性，支持多种不同的动画，而且效率很高

#4

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-components package that can be imported by your application in order to maintain backwards compatibility.

导航器已经从核心React本地包的0.44版中删除。该模块已被移动到可以由您的应用程序导入的反应式本机自定义组件包中，以保持向后兼容性。

To see the original docs for Navigator, please switch to an older version of the docs.

要查看导航器的原始文档，请切换到文档的旧版本。

As per the docs (React Native v0.54) Navigating Between Screens. It is now recommended to use React Navigation if you are just getting started, or NavigatorIOS for non-Android applications

根据文档(response Native v0.54)在屏幕之间导航。如果您刚刚开始使用React导航，或者是非android应用程序的NavigatorIOS，现在建议您使用React导航

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.

如果您刚刚开始使用导航，您可能希望使用React导航。React Navigation提供了一个易于使用的导航解决方案，可以在iOS和Android上显示常见的堆栈导航和选项卡式导航模式。

...

…

If you're only targeting iOS, you may want to also check out NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class.

如果您只是针对iOS，您可能还想检查NavigatorIOS，作为一种以最小配置提供本地外观和感觉的方式，因为它提供了一个围绕本地UINavigationController类的包装器。

NB: At the time of providing this answer, React Native was at version 0.54

NB:在提供这个答案时，React Native的版本是0.54

#1