Appearance
2、ReactNative开发环境搭建和使用
开发平台选择windows，目标平台Android。
相关工具安装：Node、ADB
开发工具安装：vscode
2.1 本地环境
2.1.1 选定版本
React Native版本：0.63.5 React Native 0.64 开始不再支持Android 5.0 以下系统。 大部分机顶盒还在使用 4.4的系统
React版本：16.13.1 基于React Native 0.63.5版本匹配的稳定版本
Node版本：16.14.0 React Native >=0.73版本，node版本需大于等于18 React Native 0.72版本，node版本需大于等于16 React Native <= 0.71版本，node版本需大于等于14
JDK版本：11（可选） React Native >=0.73版本，JDK 需要 17 版本 React Native <0.73版本，JDK 需要 11 版本 React Native <0.67版本，JDK 需要 8 版本。
2.1.2 安装Node
Node 的版本必须大于等于14。
- windows 7系统无法安装node 14以上版本
创建纯RN项目或安装 React 和 React Native 模块时可能会出现这样的错误： The engine "node" is incompatible with this module. Expected version “=>14” 可以在命令行先运行： $ yarn config set ignore-engines true 设置忽略引擎版本的检查，再去创建或安装。- 推荐用node 16版本 如果node版本大于16（node 18很常见）。则在启动metro时，会出现ERR_OSSL_EVP_UNSUPPORTED报错原因： OpenSSL 在新版本中默认使用了更严格的加密算法和安全策略，与旧代码不兼容导致的。 解决方案： 1、node版本降到16 2、在package.json文件中start等相关命令前加上openssl-legacy-provider选项，设置如下
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'3、设置环境变量NODE_OPTIONS。如下图："scripts": { "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-native start" }
安装包下载地址：
查看当前Node版本 可以打开cmd，查看当前node版本信息
npm配置（可选）
从官方源拉取npm 依赖，经常容易出现超时，拉取失败的情况。可以切换使用国内源，如淘宝源等
- 使用指定源安装(临时使用淘宝源)
npm install XXX(模块名) --registry https://registry.npmmirror.com - 全局设置
- 查看当前源
npm config get registry - 设置为淘宝源
npm config set registry https://registry.npmmirror.com # 淘宝源 或设置公司代理 npm config set registry https://maven.ipanel.cn/repository/npm-ipanel-public/ # iPanel源 - 还原默认源
npm config set registry https://registry.npmjs.org/ - 使用cnpm cnpm是一个命令，用它来代替npm
npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install XXX(模块名) - 使用nrm（推荐） nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换
npm install -g nrm # 安装nrm工具命令 npx nrm use taobao # 切换到淘宝源 npx nrm ls # 查看当前可用源命令 npx nrm use npm # 切换回官方源可使用
- 查看当前源
- 使用指定源安装(临时使用淘宝源)
2.1.3 全局安装yarn(可选)
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。 安装了node，就可以打开cmd通过npm进行安装。
- 安装命令
npm install -g yarn
- 如何使用yarn 用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
yarn add lodash # 安装lodash依赖 yarn upgrade lodash # 更新lodash依赖 yarn remove lodash # 卸载lodash依赖
2.1.4 安装ADB
ADB 全称为 Android Debug Bridge，起到调试桥的作用，是一个客户端-服务器端程序。其中客户端是用来操作的电脑，服务端是 Android 设备。
ADB 也是 Android SDK 中的一个工具，可以直接操作管理 Android 模拟器或者真实的 Android 设备。
安装包下载地址
配置环境变量 解压后，把解压路径放到系统变量（Path）里去。如下图：
查询adb版本
adb version
2.1.5 安装vscode
一路按“下一步”完成安装（安装路径可调整）
- 配置安装（可选插件） 1、中文配置：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2、ESLint：语法提示 3、Prettier：格式化 4、Live Server：本地服务 5、ES7+ React/Redux/React-Native snippets：快捷代码片段
2.1.6 创建React Native项目
- 创建本地项目（常用）
下载RN模板配置文件 git模板仓库
安装所有依赖（package.json中）
ipanel-rntv-core:2.0.2版本，npm install可用，yarn install不可用。由于yarn不支持自定义bin命令，会出现依赖安装完成后报不识别tvinit命令的异常。 ipanel-rntv-core:2.0.3以上版本，npm install和yarn install都可用
npm install(推荐) 或 yarn install启动metro
npm start 或 yarn start
- 创建指定版本项目[可选参数]（不建议使用）
你可以使用--version参数（注意是两个杠）创建指定版本的项目。注意版本号必须精确到两个小数点。不带--version参数创建react native最新版本项目
创建完成后，需要通过npm或者yarn去安装一系列的相关第三方依赖，并且版本还需要和TV软终端core版本保持一致（由于RN采用分包方式。RN core版本内置到APK中）npx react-native init tvDemoApp --version 0.63.5
2.1.7 设备调试
准备设备
- 找一台智能（Android）机顶盒或电视机，安装一个软终端APK。
- 设备需要进入“开发者选项”，打开“usb调试”。
通过adb工具连接Android设备
前提是调试的Android设备（通过WiFi或者网线连接到局域网）和PC端在同一个局域网内
- 查询设备连接情况：
adb devices - 连接设备：
adb connect 192.168.31.189 - 断开设备：
adb disconnect - 安装apk到连接设备上：
adb install -r D:\code\rn\example\react-native-tv-demo-master\android\app\build\outputs\apk\debug\app-debug.apk - 卸载apk：
adb uninstall 【applicationId(com.ipanel.join.homed.stb)】 - 重启adb服务：
adb kill-server adb start-server - 输出打印：
adb logcat - 杀掉应用（按键不响应时，可以杀掉应用，不用重启盒子）
adb shell am force-stop 【applicationId(com.ipanel.join.homed.stb)】
- 查询设备连接情况：
am命令运行React Native应用
先进入shell：adb shell
- 1、访问metro服务器bundle
am start -a host.OPEN -e _target_ rn_app -e devUrl 192.168.40.84:8081 -e app_name ReactNativeTvDemo - 2、访问本地bundle（内置APK RN模块中）
am start -a host.OPEN -e _target_ rn_app - 3、访问在线bundle
am start -a host.OPEN -e _target_ rn_app -e url http://192.168.40.84:8081/bundlejs/tvsport.zip -e app_name tvsport
- 1、访问metro服务器bundle
adb logcat抓取日志
一般的情况下，我们在做APP测试的时候，其实并不需要经常使用adb去抓取我们的日志，因为正常的情况下都是会有预期结果和实际结果作对比的。真正需要用到adb抓取日志的情况，就是在我们测试的过程中出现了异常的过程，比如测试过程中系统突然卡住不能动了、系统直接（Crash）崩溃掉了、应用程序无响应（ANR），即出现闪退或者异常的情况下就可以使用adb抓取日志来分析发生的原因，以便于更好的提bug给到开发。
关闭软终端APK日志上传服务器功能
进入apk后长按“菜单”键，进入后台设置页面，保存日志到文件（重启应用才生效）。 功能“关闭”，才会输出log到本地文件；“打开”，则上传到服务器。
服务器日志下载：
git工作组下载（通过设备appid或tvid）：下载日志入口
抓取日志
- 先adb connect连接设备。（连接后可在终端输入adb devices查看连接状态）
- 抓取日志前，清除旧的日志信息输入下面的命令并执行
adb logcat -c- 开始抓取日志，输入如下命令把日志写入到文件中：
设备操作，然后按下Ctrl+C结束日志的抓取。（-v time的意思是按照时间记录日志）adb logcat -v time > D:\react-native\tv\log\log.log- 查看本地日志文件。
2.2 在线环境
在线codeserver是公司IDE开发环境，即开发者网络平台。创建应用（根据向导模板），会同时创建一个源码仓和一个发布仓。 在线地址：https://code.ipanel.cn。（何小芬负责）
2.2.1 邀请用户注册加入
- 1 运营人员通过邮件邀请开发者注册加入开发组织
- 2 开发者收到邮件
- 3 开发者点击邮件链接进行注册
- 4 注册成功后开发者输入用户名密码登录，新消息提示中能查看到开发组织的邀请消息
- 5 开发者点击消息中的"接受"或"拒绝"确认是否加入开发组织,并收到相应的结果提示消息
- 6 邀请人也会收到相应的操作提示消息
2.2.2 创建项目、应用
- 1 开发者从首页进入工作台，点击"应用视图"
- 2 点击"创建应用"按钮，进入到开发组织节点的基于向导创建页面
- 3 点击"开发项目"，选择向导创建开发项目，填写项目负责人才能创建项目下的应用
- 4 点击"电视JS-APP", 选择向导创建电视js_app，可以创建个人app或负责的项目的app, 等待创建完成的提示
2.2.3 应用任务问题清单列表
- 1 开发人员、测试人员在工作台应用视图页面点击应用右侧图标进入查看、编辑任务问题清单列表
- 2 点击"创建工单"，通过标签进行任务与bug分类、可以设置优先级, 可以指派责任人
- 3 点击对应任务bug工单，可以进一步添加进展评论、可以选择关闭任务或bug
- 4 可以开启中、已关闭状态的清单列表，通过筛选不同标签、指派人的任务或bug进行查看
2.2.4 应用开发调试
在源码仓进行源码修改、调试、预览、提交、打tag等相关开发工作。
电视JS应用
打开选择codesever
- 打开IDE开发平台公网首页：https://code.ipanel.cn
- 进入工作台:
- 已登陆，点击首页导航栏的"工作台"进入
- 未登录：点击首页导航栏的"工作台", 自动进入登录页面输入用户名密码，成功登录后自动跳转进入工作台。
- 未登录：点击首页导航栏的"登录/注册",输入用户名密码成功登录后自动跳回首页，点击工作台进入.
效果如图：
- 点击显示工作台"应用视图", 选择电视应用(类型为rn-tv), 点击vscode图标, 进入codeserver
真机预览
- 等待codeserver加载完成应用的仓库后，目录文件区域显示应用名，展现下级目录显示源码仓与发布仓(带.release后缀)
- 修改源码仓debug.py文件，设置电视APPID(DEVICE_ID参数)、cloud集群（PULSER_URL参数，目前默认为ipanelcloud2）。软终端APK的“电视信息”查看APPID，如下图：
- 定位到源码仓，打开终端，执行npm install、yarn start, 启动metro服务
- 定位到源码仓，打开另一个新终端，执行yarn debug, 会显示出codeserver代理的http地址，以及启动成功提示。
- 电视直接打开预览页面
- 真机预览过程中，执行修改代码，在焦点离开当前文件窗口时代码会自动保存，电视显示会实时刷新
- 预览过程中，运行的实时日志会在metro服务的终端打印出来，如:
[Tue Aug 13 2024 10:11:11.919] LOG ...... [Tue Aug 13 2024 10:11:11.919] LOG ......
手机JS应用
打开选择codesever
- 打开IDE开发平台公网首页：https://code.ipanel.cn
- 进入工作台:
- 已登陆，点击首页导航栏的"工作台"进入
- 未登录：点击首页导航栏的"工作台", 自动进入登录页面输入用户名密码，成功登录后自动跳转进入工作台。
- 未登录：点击首页导航栏的"登录/注册",输入用户名密码成功登录后自动跳回首页，点击工作台进入.
- 点击显示工作台"应用视图",选择手机应用(类型为rn-mobile), 点击vscode图标, 进入codeserver
真机预览
等待codeserver加载完成应用的仓库后，目录文件区域显示应用名，展现下级目录显示源码仓与发布仓(带.release后缀)
定位到源码仓，打开终端，执行npm install、yarn start, 启动metro服务
定位到源码仓，打开另一个新终端，执行yarn debug, 会显示出codeserver代理的http地址。
手机摇一摇进入开发者模式。
爱家宝metro版分ios和android不同app下载安装
- ios安装：https://testflight.apple.com/join/671O8gAQ。先安装testflight，再从"开始测试"进入安装“爱家宝-开发”（chenll负责）
- android安装：https://ipanelcloud2.ipanel.cn:50443/iapp/static/app/android/debug/app-debug.apk（yusm负责）
以ios为例，操作效果如下图：
输入代理的http地址进行预览调试
ios访问index.ios.js android访问index.android.js 直接访问index.js会报错，由于下载的手机APK模块名已固定。
真机预览过程中，执行修改代码，在焦点离开当前文件窗口时代码会自动保存，电视显示会实时刷新。
预览过程中，运行的实时日志会在metro服务的终端打印出来，如:
[Tue Aug 13 2024 10:11:11.919] LOG ...... [Tue Aug 13 2024 10:11:11.919] LOG ......
2.2.5 应用编译打包
通过命令行命令，可以一键完成选基线、源码拉取、编译、打包、推送等工作.
- 在源码仓 执行 yarn release 命令
yarn release查看应用编译版本(git发布仓)
在发布仓可查看所有编译版本。如下应用对应仓库
源码仓：https://i.code.ipanel.cn/git/wzb_00001/wzb_00001_app0.git 发布仓：https://i.code.ipanel.cn/git/wzb_00001/wzb_00001_app0.release.git 版本列表如下图
可以工作台-应用视图-应用列表页查看应用的最新版本
2.2.6 应用发布使用
此系统分集群部署。提供对电视软终端APK和手机爱家宝APP提供接口获取某个应用APP在某个设备上依赖core版本所发布的APP包。需要管理员进入系统选择某个应用APP在某个运营商域下发布对应的APP版本。 服务器地址：http://ipanelcloud2.ipanel.cn:50080/jshomeapp/index/home（账号找陈杰） 说明：为与软终端APK的发布保持一致，基于运营商的发布会转为基于域的版本发布，正在测试中，测试ok后会同步。
- 1、添加应用
在git仓库获取rn-tv应用仓库（特有标签）作为应用列表
- 2、选择运营商发布应用
根据地址选择不同地区可添加一个运营商，在某个运营商下发布某个APP应用。
添加运营商模块（也可同时添加应用进行发布） 
添加发布应用：添加新应用发布到该运营商域； 发布：选择该应用的不同版本重新发布到该运营商域 
3、TV端RN应用接口
软终端APK打开每个RN应用时会调用接口获取，并通过版本比对是否有更新？
入参说明：
- appEnglishName: rn应用名称，创建应用时填写（配置入口时填的es_app_name）
- useHermes:RN模块JS引擎是否使用hermes，支持预编译（字节码包），apk模块配置的。运行速度比JSC引擎要快
- operatorId：软终端APK选择地址中对应的运营商id
- coreVersion：软终端RN模块基础包版本号
//接口
http://ipanelcloud2.ipanel.cn:50080/s/jshomeapp/tv/getRnAppInfo?appEnglishName=tvsport&useHermes=false&tvId=894e4e164b2bda39b6755dc80e1ead80e1d6849b&operatorId=e78aac2fc48b4588ad40a9d94d8dfade&tvAppId=EMBSTV4cc2e4760c40a5668515e193c7908eb8&coreVersion=2.0.2
//返参
{
code: 0,
data: {
appChineseName: "运动健康",
appEnglishName: "tvsport",
appId: 2,
coreVersion: "2.0.2",
fileMd5: "ff82407636e400017f41c74a80d47625",
operatorId: "e78aac2fc48b4588ad40a9d94d8dfade",
operatorName: "B1-华数传媒",
packZipUrl: "https://ipanelcloud2.ipanel.cn:50443/jshomeapp/appFiles/packFiles/rnapp/tvsport/android/v1.1.116/20240806110034/rnapptvsport_android_v1.1.116_20240806110034.zip",
releaseDesc: "睡眠分布图变形问题修改",
releaseTime: "2024-08-06 11:00:51",
upgradeMode: "2",
versionCode: "v1.1.116"
},
msg: "操作成功"
}2.2.7 RN应用包使用
2.2.7.1 单独部署
1 RN应用包部署 将发布仓最后编译打包下载的android.zip文件部署到支持http下载的服务器上
2 入口配置
- homed应用方式 在homed后台应用管理中创建空壳应用，挂载到具体的栏目或者专题上，并发布。
- theme配置方式
sContentRouteConfig下配置只能用action=host.OPEN方式打开，不能用package和className方式。
"sEntryRouterConfig": { //注册target(用于爱奇艺、腾讯等栏目跳转链接使用) "health_center": "intent://?package=com.ipanel.join.homed.stb&className=com.ipanel.join.rn.MainActivity&es_app_name=tvsport&es_bundle_id=tvsport&es_bg_img=bg_health_img", //运动健康UI "systemTest": "intent://?action=host.OPEN&es__target_=rn_app&es_app_name=systemTest&es_url=http%3A%2F%2Fwebclient.homed.tv%2Fipanel%2FsystemTest.zip&es_bundle_id=123333&es_bundle_ver=v1.1.1&es_bg_img=bg_mode_standard_enter", // 系统设置的网络测速 "product": "intent://?package=com.ipanel.join.homed.stb&className=com.ipanel.join.rn.MainActivity&es_app_name=tvshop&es_bundle_id=tvshop&es_routeto=Product", //商品详情， "shopping_cart": "intent://?package=com.ipanel.join.homed.stb&className=com.ipanel.join.rn.MainActivity&es_app_name=tvshop&es_bundle_id=tvshop&es_routeto=ShoppingCart", //购物车 "order_list": "intent://?package=com.ipanel.join.homed.stb&className=com.ipanel.join.rn.MainActivity&es_app_name=tvshop&es_bundle_id=tvshop&es_routeto=MyOrderList", //我的订单 "package_pay": "intent://?package=com.ipanel.join.homed.stb&className=com.ipanel.join.rn.MainActivity&es_app_name=tvshop&es_bundle_id=tvshop&es_routeto=PackagePay&es_packageld=$.id;" //套餐订购 }3 RN应用地址规范(android)
#action：固定host.OPEN #es__target：固定rn_app #es_app_name：应用名称 #es_url：服务器部署的android.zip下载地址 #es_bundle_id：应用id（暂时可随意） #es_bundle_ver：版本号（不变化时，软终端会有缓存，不重复下载；变化时，重启软终端则会重新下载更新） #es_bg_img：过渡背景图（可选，imgFiles配置的key名称，如：bg_health_img） intent://?action=host.OPEN&es__target_=rn_app&es_app_name=hxf_rntv_test1&es_url=http%3A%2F%2Fwebclient.homed.tv%2Fipanel%2FhnApp.zip&es_bundle_id=hxf_rntv_test1&es_bundle_ver=v1.0&es_bg_img=bg_health_img4 RN应用包更新部署
- 1)需要修改homed空壳应用中应用地址中es_bundle_ver参数不同（往后追加，如v1.1）：软终端做了版本管理无版本更新直接用缓存数据(后续软终端对接接口直接判断是否有对应应用版本更新，就不需要手动修改了)
- 2)软终端apk需要重启
2.2.7.2 对接应用发布系统
入口配置： 1、独立应用方式配置intent地址 2、theme配置
//RN应用地址规范(android)。主要去掉url和bundle_ver参数 #action：固定host.OPEN #es__target：固定rn_app #es_app_name：应用名称 #es_bundle_id：应用id（暂时可随意） #es_bg_img：过渡背景图（可选，imgFiles配置的key名称，如：bg_health_img） intent://?action=host.OPEN&es__target_=rn_app&es_app_name=hxf_rntv_test1&es_bundle_id=hxf_rntv_test1软终端对接: 接口：http://ipanelcloud2.ipanel.cn:50080/s/jshomeapp/tv/getRnAppInfo
2.3 ipanel-rntv-core依赖发布
鉴于电视软终端APK提供一个RN应用开发平台。方便开发者更方便快捷的进入开发，将一些基础能力相关的依赖统一封装起来。由ipanel发布更新npm官网及ipanel镜像代理。
可用版本列表
npm发布说明：https://git.ipanel.cn/git/web_development/ipanel-rntv-core/src/master/README.md
包含依赖及版本
"dependencies": {
"@react-native-async-storage/async-storage": "1.17.11",
"@react-native-community/slider": "3.0.0",
"@react-native-masked-view/masked-view": "0.2.7",
"@react-navigation/bottom-tabs": "6.5.7",
"@react-navigation/material-bottom-tabs": "6.2.15",
"@react-navigation/material-top-tabs": "6.6.2",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.3.16",
"@react-navigation/web": "1.0.0-alpha.9",
"@rneui/base": "4.0.0-rc.7",
"@rneui/themed": "4.0.0-rc.7",
"@shopify/flash-list": "1.4.2",
"date-fns": "2.29.3",
"joi": "17.7.0",
"md5": "2.3.0",
"native-echarts": "0.5.0",
"patch-package": "6.5.1",
"prop-types": "15.8.1",
"pubsub-js": "1.9.4",
"qrcode-generator": "1.4.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.5",
"react-native-9patch-image": "0.3.4",
"react-native-charts-wrapper": "0.5.11",
"react-native-gesture-handler": "2.9.0",
"react-native-linear-gradient": "2.6.2",
"react-native-pager-view": "6.1.4",
"react-native-paper": "5.2.0",
"react-native-reanimated": "2.14.4",
"react-native-safe-area-context": "3.4.1",
"react-native-screens": "3.13.1",
"react-native-smartassets": "1.0.4",
"react-native-svg": "9.0.0",
"react-native-tab-view": "3.4.1",
"react-native-vector-icons": "9.2.0",
"react-native-video": "5.1.1",
"react-native-web": "0.14.3",
"react-native-webview": "12.0.2",
"react-native-wheel-picker-android": "2.0.6",
"trtc-react-native": "2.4.1",
"victory-native": "33.0.0"
}可新增未包含的依赖
- 纯JS依赖
package.json直接加，不涉及原生android代码修改。所以也不需要升级APK。
{ "name": "tvsport", "version": "0.0.1", "private": true, "scripts": { "postinstall": "patch-package", "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios", "test": "jest", "lint": "eslint ." }, "dependencies": { "react": "16.13.1", "react-native": "0.63.5", "ipanel-rntv-core": "2.0.2", "crypto-js": "^4.2.0" // 新增 }, "devDependencies": { "@babel/core": "^7.12.10", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "eslint": "^7.18.0", "metro-react-native-babel-preset": "^0.64.0", "react-app-rewired": "^2.1.8", "react-scripts": "^4.0.1" } }- 涉及原生（android）依赖
依赖安装后含有android目录，则需要软终端APK添加相应依赖模块并编译升级APK方可支持。
基础包更新:
基础包更新必须更新APK。则会发布新的ipanel-rntv-core版本
1、涉及第三方依赖JS部分修改。需要通过补丁来编译，则需更新APK。 2、新增原生组件需打包到基础包。否则多个rn应用同时运行则闪退，引入地址不同，则需更新APK。
查看ipanel-rntv-core版本
- 查看路径 电视软终端-》工程菜单-》点击显示应用和系统信息
- 查看效果
2.4 作业
- 1 本地环境工具安装版本信息查询截图
- 2 TV端RN应用模板项目安装依赖成功截图
- 3 TV端RN应用模板项目启动metro服务截图
- 4 完成注册加入ipanel开发组织，创建项目应用，在TV端RN应用模板预览效果截图
- 5 在线创建应用编译发布版本截图
在APP.js中增加一段代码如下：（源码仓提交代码并打新tag进行编译打包推送到发布仓）
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
//改为
<Section title="Learn More">
Read the docs to discover what to do next:<Text style={{color:'red'}}>个人名字</Text>
</Section>
- 6 RN应用后台系统在线发布应用截图（应用名同上）
- 7 软终端首页打开应用效果图（做个应用挂homed测试栏目）
