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

Question

我正在探索 React Native 的可能性在 Navigator component 的帮助下开发具有自定义 View 之间导航的演示应用程序时.

主应用程序类渲染导航器并在 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 });
                    }
                }}
             />
        );
    }
}

目前应用包含两个 View :

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

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

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

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

Answer 1

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

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

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