react native + as实现简易本地视频播放器

1.背景

          存在需要在断网环境能够播放本地视频的需求，这就要求视频存放在本地并且生成安装包。

          点击banner则播放该视频（可在没有网络的情况下播放）

2.调研

需求分析： 

          1.考虑使用react-native + as的方式，通过as打包成apk包安装进安卓手机。

          2.视频文件因为需要存放在本地，那么视频文件在不损害文件完整的度的情况下需要尽量的小，从而减少apk包的大小。

准备工作：

          1.安装vscoude，android studio，jdk，夜神模拟器。

          2.配置好react-native环境(参考文档）

开始：

         1.熟悉 react-native 标签  （暂时忘记div这些web标签吧，这里不适用）

         2.初始化项目   npx react-native init asTest  默认得到hello wolrd

         3.添加屏幕适配.js（原生需要考虑屏幕宽度对应设计图宽度的单位宽度（高度））

         4.务必认真阅读第一点，添加style文本.js

3.编码：

         1.不展开，想怎么写就怎么写，符合实际需求就行。

4.调试

1.debugger调试

         1.调试  npx react-native run-android，使用as打开默认项目，点击debugger。

         2.会自动检测是否开启as调试。

 

       这时候只要静静的等待，数据写入debugger调试器。

       顺利进入=>,到这里，几乎成功的50%，已经100%还原psd设计稿。

 

       接下来只要，点击banner进入视频就ok了。

 

      很好，视频完美播放。

2.模拟器调试

这时候直接使用as Build是不行的，

 

报错。

解决方法

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

这是可能提示 react-native 不是可执行的方法或命令，只是需要先全局安装 react-native-cli，npm install -g react-native-cli

使用as Build =>apk包

 

将apk包直接拖入夜神模拟器，

 

确保能够正常安装。

3.真机调试。

 

ok，真机正常播放。

npx react-nanpx react-native init AwesomeProjecttive init AwesomeProject

npx react-native init AwesomeProject