首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用React-Native中的Navigator组件进行自定义导航

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

Stack Overflow用户
提问于 2015-03-30 06:11:18
回答 4查看 26.6K关注 0票数 167

我正在探索React Native的可能性,同时在Navigator component的帮助下开发一个演示应用程序,在视图之间进行自定义导航。

主应用程序类呈现导航器,内部renderScene返回传递的组件:

代码语言:javascript
复制
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包含两个视图:

代码语言:javascript
复制
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} FeedView Object {name:'FeedView',component: function} //呈现Feed View

  • 我的方法通常是否符合React方式,或者是否可以做得更好?

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-05-02 10:19:20

你的方法应该工作得很好。在Fb的大型应用程序中,我们避免调用场景组件的require(),直到我们渲染它,这可以节省一点启动时间。

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

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

票数 78
EN

Stack Overflow用户

发布于 2017-08-29 15:32:30

RN 0.44.0中,Navigator现在已被弃用,您可以使用react-native-deprecated-custom-components来支持使用Navigator的现有应用程序。

票数 3
EN

Stack Overflow用户

发布于 2018-04-01 08:52:58

正如其他人之前提到的,Navigator从0.44版本开始就被弃用了,但仍然可以导入以支持较旧的应用程序:

导航器已从0.44版的核心React Native包中删除。该模块已移动到可由您的应用程序导入的react-native-custom-components包中,以保持向后兼容性。

若要查看Navigator的原始文档,请切换到旧版本的文档。

根据文档(React Native v0.54) Navigating Between Screens。现在,如果您刚刚开始,建议使用React Navigation,或者对于非Android应用程序使用NavigatorIOS

如果您刚刚开始使用导航,则可能需要使用React

。React导航提供了一个易于使用的导航解决方案,能够在iOS和安卓上呈现常见的堆栈导航和选项卡式导航模式。

..。

如果您只针对iOS,您可能还想查看NavigatorIOS,作为一种使用最少配置提供本机外观的方法,因为它为本机UINavigationController类提供了一个包装器。

NB:在提供此答案时,React Native的版本为0.54

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29335523

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档