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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在开发React应用程序时探索React

Native的可能性，并借助Navigatorcomponent在视图之间进行自定义导航。

主应用程序类呈现导航器，并在内部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 });
                    }
                }}
             />
        );
    }
}

目前，该应用包含两个视图：

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虽然视图正确呈现一次，但按“转到菜单”时会多次调用。动画是如何工作的？

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

  • 通常，我的方法符合React方法，还是可以做得更好？

我要实现的功能类似于NavigatorIOS但没有导航栏（但是某些视图将具有自己的自定义导航栏）。

回答：

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

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

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

以上是 使用React-Native中的Navigator组件进行自定义导航 的全部内容， 来源链接： utcz.com/qa/408521.html

回到顶部