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

我想弄清楚的是:

• 我在日志中看到，虽然视图正确渲染一次，但按转到菜单"时，多次调用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).

推荐答案

您的方法应该很好用.在Fb的大型应用程序中，我们避免在渲染场景组件之前为场景组件调用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屋！