使用 React-Native 中的 Navigator 组件自定义导航

IT技术 javascript ios navigation reactjs react-native
2021-05-02 06:45:01

我正在探索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虽然视图正确呈现一次,但按下“转到提要”时会多次调用。动画是这样工作的吗?

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

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

4个回答

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

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

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

Navigator现在已弃用,RN 0.44.0您可以react-native-deprecated-custom-components改用它来支持使用Navigator.

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

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

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

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

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

...

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

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

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