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

Question

我正在探索 React Native while developing a demo app with custom navigation between views with the help of Navigator component 的可能性。

主应用程序 class 呈现导航器并在内部 renderScene returns 传递组件：

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>
        );
    }
}

我想弄明白的是：

我在日志中看到，当按下“go to 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 的东西，但没有导航栏（但是有些视图会有自己的自定义导航栏）。

Answer 1

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

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

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

Answer 2

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

的现有应用程序

Answer 3

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

Answer 4

正如其他人之前提到的，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.

To see the original docs for Navigator, please switch to an older version of 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 non-Android 应用程序

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 NavigatorIOS as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native UINavigationController class.

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

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

Custom navigation with Navigator component in React-Native

javascript

ios

navigation

reactjs

react-native