使用React Native写页面踩过的坑

1.组件之间通信

子组件调用父组件的方法:子组件要拿到父组件的属性,需要通过this.props方法。每次父组件修改了传入的属性,子组件会收到通知,会自动获取新的属性。

父组件调用子组件的方法:在ReactJS中通过ref属性。该属性类似与给组件起名字。父组件可以通过this.ref.xxx来获取到该组件

2.创建不定数View,在return方法中不支持for语句

(1).采用MAP形式

(2).采用数组的形式

3 ref 属性

4.网络请求加载Loading框注意的地方

Loading 框采用的是IOS原生封装,在RN页面进行网络请求注意延迟200ms左右

this.timer = setTimeout(()=>{this._fetchData();}, 200);

避免Loading 框在上一页面。

5.关于倒计时问题

产品详情页有倒计时功能,但应用切换到后台后,倒计时开始停止工作,这时候需要重新校准时间。所以需要应用的状态

RN中使用APPState来查看应用状态

通过此接口可以获悉应用在当前处于后台还是前台激活的状态,常用方法和应用场景类似于h5的visibilitychange。

注意该接口要最新版本(2.0+)的 react-native 才能调用。

获取到的应用状态常规有:

active:表示应用处于前台运行状态;

background:表示应用处于后台挂起状态;

inactive:表示过度状态,常规不会发生,可以先忽略

我们可以使用 AppState.addEventListener 和 AppState.removeEventListener 方法来监听、移除应用状态的 change 事件。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,344评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,397评论 19 139
  • 有一段时间没有写东西了,因为最近项目开始尝试使用React Native(以下简称RN)来开发,所以这段时间一直在...
    宫城_阅读 10,132评论 6 32
  • 所谓说:相处容易同住难。最近我真的是无语到,还没有毕业,还没有收入,被人管到我真的是几乎接近疯狂。 争议的问题只有...
    锅酱君阅读 3,570评论 1 0
  • 从一周岁抓周的时候大人们就想知道你将来想干什么,这大概就是你一周岁时候的梦想,当然也许是纯粹因为那个东西好看。 上...
    阿咧怪阅读 3,709评论 0 2