React Native Android 应用层实战沦陷记，android组件化开发依赖

“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 被顶上去了，坑爹。