167

我正在探索React Native的可能性,同时在Navigator组件的帮助下开发一个在视图之间进行自定义导航的演示应用程序。

主应用程序类呈现导航器并在内部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尽管视图正确渲染一次,但在按下“go to feed”时会调用多次。动画是这样工作的吗?

    index.ios.js:57 Object {name: 'WelcomeView', component: function}
    index.ios.js:57 Object {name: 'FeedView', component: function}
    // renders Feed View
    
  • 一般来说,我的方法符合 React 的方式,还是可以做得更好?

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

4

4 回答 4

78

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

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

导航器仍在进行中,但如果您发现任何问题,请在 github 上归档并标记我!(@ericvicenti)

于 2015-05-02T02:19:19.767 回答
3

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

于 2017-08-29T07:32:30.413 回答
2

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

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

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

根据文档(React Native v0.54)在屏幕之间导航。如果您刚刚开始,现在建议使用React Navigation ,或者对于非 Android 应用程序使用NavigatorIOS

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

...

如果您只针对 iOS,您可能还想查看NavigatorIOS ,以通过最少的配置提供原生外观和感觉,因为它提供了原生 UINavigationController 类的包装器。

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

于 2018-04-01T00:52:58.013 回答
0

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

于 2018-02-24T20:58:46.843 回答