React-Native - 使用Navigator组件进行自定义导航

Question

我正在探索React Native的可能性,同时在Navigator组件的帮助下开发一个在视图之间自定义导航的演示应用程序- http://facebook.github.io/react-native/docs/navigator.html#content

主app类渲染navigator和inside Navigator返回传递的组件:

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

现在app包含2个视图:

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方式,还是可以做得更好？

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

Answer 1

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

renderScene首次将场景推送到导航器时,应调用该函数.当导航器重新渲染时,也会调用活动场景.如果你看到renderScene在a push之后多次调用,那么它可能是一个bug.

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