“redux-thunk”: “^2.1.0”,
“react-native-swiper”: “^1.5.4”,
“react-native-scrollable-tab-view”: “^0.6.0”,
“react-native-tab-navigator”: “^0.3.3” } }
2-2 Splash开屏广告倒计时页面
大致效果如下图(实际为启动时模拟随机获取服务端一张广告图片,正式可替换为 WebView 等,然后图片以动画淡出显示,显示 图片时左上角再显示 AD 字样,右下角显示 5 S 倒计时全屏幕开屏):
涉及知识点及处理技巧:
-
注意开屏的概念,展示后进入应用主页后点击 Back 不能再显示,所以在使用 Navigator 组件由 Splash 页面跳转 Home 页时要使用 Navigator 的 replace 等方法来替换当前栈,避免 Back 又回来 Splash 页面。
-
React Native 动画在 Android 某些设备上性能还是有些堪忧,所以能省略就尽量别使用吧。
2-3 Home 页潮流生活 Tab 页面
大致效果如下图,由于可以上下滑动,所以采用了 React Native 的 ListView 来实现父布局,顶部 TooBarAndroid 为自己再次包装的 ActionBar 组件,循环 Banner 采用开源组件 react-native-swiper 实现,接着的 10 个分类采用二次封装的 ListView 实现,万年历为普通布局,以上全部作为 ListView 的 Header 渲染,下面的电影列表作为 ListView 的 item 渲染,所有模块访问自己的服务器接口。
涉及知识点及处理技巧:
-
React Native ListView 类比 Android 的灵活使用(RN L
istView 存在性能问题,最好寻求替代方案)。 -
悬浮球布局技巧采用 React Native 的 style 的绝对 position 实现。
-
react-native-swiper 开源组件的学习(不能只会用,要学人家怎么自定义 RN 纯 JS 层组件的,实质也是 ScrollView 的相关属性组合控制实现,类似 Android 的自定义,因为实质就是 Android 端各种 Touch 事件传递过来换了叫法而已,猫就是咪,咪就是猫的道理)。
-
底栏采用 react-native-tab-navigator,实质依旧是想学习下人家的写法,毕竟是写 Android 的,虽然知道是事件控制,但是还得学些人家优质的 JS 写法,实质要学习的就是灵活掌握如何封装组件及切换 Tab 时 RN state 的处理。
2-4 微信精选 Tab 页面
实际效果如下,数据来源于免费 API,JSON 格式,主要就是分页加载的 GridView 使用技巧总结,上拉可以加载更多页,每页 10 个 item。
涉及知识点及处理技巧:
-
React Native ListView 灵活运用,分页加载的组件实现技巧及配合 Redux 的分页加载处理技巧。
-
ListView 封装成 GridView 的技巧(注意 item 的key 值设定,避免不必要的性能问题)。
2-5 个人中心 Tab 页面
效果如下图,具体采用 ScrollView(不用 ListView 是想尽可能的在一个项目中练习使用尽量多的 React Native 组件),比较简单,没有太多技巧涉及。
涉及知识点及处理技巧:
-
常规 React Native 文档接口使用技能,没啥技巧。
-
Item 推荐的内容都值得拜读。
2-6 潮流生活 Tab 页新闻分类页面
具体效果如下,实质就是 ViewPager 左右滑动,使用了 react-native-scrollable-tab-view 开源组件,感觉作者 JS 功底还是很厉害的,懒加载页面,每页为 ListView 进行 item 渲染,数据来源于聚合数据免费 API JSON 接口。
涉及知识点及处理技巧:
-
react-native-scrollable-tab-view 组件使用,现在还在研究这个组件自定义实现的细节,后面有空再细说一篇成果吧,这个老外还是很厉害的,膜拜。
-
ListView 的常规渲染,数据拉取不同状态时页面渲染不同的组件,譬如 Loading、Item 等,比较符合真实生产环境(注意 item 的key 值设定,避免不必要的性能问题)。
2-7 个人中心在线机器人客服页面
具体效果如下,数据来源于聚合数据免费图灵机器人 API,主要模拟了 IM 类型应用的开发,实质为 React Native 的 ListView 配合相关技巧完成,基本类似一个简单的 IM 交互界面。
涉及知识点及处理技巧:
-
聊天界面数据采用 JS 数组保存,每次对话双方数据均通过 Redux 发送触发 state 然后在聊天界面的 render 中插入界面预定义的数组中再刷新界面(state 的优化,不要存储太多大量数据,而尽可能做标记)。
-
两个聊天 item 布局使用同一个封装的组件,只是依据是谁的 type 决定使用怎么样的 style而已,以此做到动态布局。
-
键盘输入后聊天自动向上滑动采用了 React Native ListView 自生性能的一个坑实现,那就是每逢 item 刷新时 ListView 的 Header、Footer 都会重新刷新,所以我们可以通过 Footer 的 onLayout 方法获得为止进行 ListView 的 scrollTo 滑动,以此实现 IM 聊天自动滑屏。
-
暂时有一个锅还没找到原因,键盘弹出时一些固件上概率性 ToolBar 被顶上去了,坑爹。
性能的一个坑实现,那就是每逢 item 刷新时 ListView 的 Header、Footer 都会重新刷新,所以我们可以通过 Footer 的 onLayout 方法获得为止进行 ListView 的 scrollTo 滑动,以此实现 IM 聊天自动滑屏。
- 暂时有一个锅还没找到原因,键盘弹出时一些固件上概率性 ToolBar 被顶上去了,坑爹。