在 React-Native 中使用 Navigator 组件自定义导航答案

【问题标题】：Custom navigation with Navigator component in React-Native在 React-Native 中使用 Navigator 组件自定义导航
【发布时间】：2015-06-02 20:06:15
【问题描述】：

我正在探索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>
        );
    }
}

我想弄清楚的是：

我在日志中看到，当按“转到 feed”时，renderScene 被调用了多次，尽管视图一次正确呈现。动画是这样的吗？

index.ios.js:57 Object {name: 'WelcomeView', component: function}
index.ios.js:57 Object {name: 'FeedView', component: function}
// renders Feed View

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

我想要实现的是类似于NavigatorIOS 但没有导航栏（但是有些视图会有自己的自定义导航栏）。

【问题讨论】：

@ericvicenti 此示例应包含在文档中的Navigator page 中。它更完整，更好地说明了如何在上下文中使用 Navigator 组件。
只是尝试您的示例，当导航器推送发生时场景是否应该自动更改？对我来说，您的示例从未显示提要视图！文本，所以我想知道最近的版本是否有所改变。

标签： javascript ios navigation reactjs react-native

【解决方案1】：

您的方法应该很有效。在 Facebook 的大型应用程序中，我们避免在渲染之前为场景组件调用 require()，这样可以节省一些启动时间。

renderScene 函数应在场景首次推送到导航器时调用。当导航器重新渲染时，它也将被调用用于活动场景。如果您看到renderScene 在push 之后被多次调用，那么这可能是一个错误。

导航器仍在开发中，但如果您发现任何问题，请在 github 上提交并标记我！ (@ericvicenti)

【讨论】：

您好@Eric，请查看此链接：- stackoverflow.com/questions/44538306/…

【解决方案2】：

Navigator 现在在 RN 0.44.0 中已弃用，您可以改用 react-native-deprecated-custom-components 来支持使用 Navigator 的现有应用程序。

【讨论】：

【解决方案3】：

正如其他人之前提到的，Navigator 自 v0.44 以来已被弃用，但仍可以导入以支持旧应用程序：

Navigator 已从核心 React Native 包中移除 0.44 版。该模块已移至 react-native-custom-components 可以由您导入的包应用程序以保持向后兼容性。

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

根据文档（React Native v0.54）Navigating Between Screens。如果您刚刚开始使用，现在建议使用 React Navigation，或者对于非 Android 应用程序，建议使用 NavigatorIOS

如果您刚刚开始使用导航，您可能会想要使用 React Navigation。 React Navigation 提供了一个易于使用的导航解决方案，能够呈现常见的堆栈导航和 iOS 和 Android 上的选项卡式导航模式。

...

如果您只针对 iOS，您可能还需要查看 NavigatorIOS 作为一种以最少的配置提供原生外观和感觉的方式，因为它为原生 UINavigationController 类提供了一个包装器。

注意：在提供此答案时，React Native 的版本为 0.54

【讨论】：

【解决方案4】：

现在不推荐使用导航器组件。你可以使用 askonov 的 react-native-router-flux，它种类繁多，支持许多不同的动画，而且效率很高

【讨论】：