在 React-Native 中使用 Navigator 组件自定义导航 [英] Custom navigation with Navigator component in React-Native

问题描述

我正在探索 React Native 的可能性，同时开发具有自定义视图之间导航的演示应用程序借助 Navigator 组件.

I’m exploring possibilities of React Native while developing a demo app with custom navigation between views with the help of Navigator component.

主应用程序类渲染导航器并在 renderScene 内部返回传递的组件:

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

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 会被调用多次，尽管视图会正确渲染一次.动画是这样的吗?

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

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

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

Generally does my approach conform to the React way, or can it be done better?

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

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

推荐答案

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

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.

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

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.

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

The navigator is still a work in progress, but if you find any problems with it please file on github and tag me! (@ericvicenti)

这篇关于在 React-Native 中使用 Navigator 组件自定义导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！