IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> React Native Android 应用层实战沦陷记 -> 正文阅读

[移动开发]React Native Android 应用层实战沦陷记

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 ListView 存在性能问题,最好寻求替代方案)。

  • 悬浮球布局技巧采用 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 被顶上去了,坑爹。

2-8 通用 RN WebView 页面


类似常规 Android 应用开发一样,我们一般整个应用都会设计一个通用不同参数传递的 WebView 界面,支持 Web 多级页面 goBack 操作,支持 Web 其他操作,纯 Android WebView 的封装使用,在本应用中依据不同参数展示微信精选详情、新闻详情、电影详情、个人中心技术推荐详情等。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-01-04 13:32:50  更:2022-01-04 13:35:26 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:04:36-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码