入门教程
duxapp
通过框架和模块组合,大大降低了RN依赖安装、APP打包的难度,仅需创建简单的配置文件,就可以实现想要的依赖和打包。
开始之前
在开始之前,需要根据RN中文网搭建好需要的开发环境,即便我们的框架大大降低了RN的难度,但是打包的环境还是需要的 搭建开发环境
如果你不想安装开发环境,也可以先选择使用官方提供的通用调试包,就可以先跳过环境安装过程
准备
在新手教程中,你已经创建了一个全新模块,并且添加了 duxui
模块的依赖,要兼容RN,还需要添加 duxappReactNative
模块作为依赖,在添加依赖之前你需要安装
# 安装duxappReactNative
yarn duxapp app add duxappReactNative
安装模块之后修改模块配置文件 src/moduleName/app.json
, 在 dependencies
中添加 duxappReactNative
{
"name": "moduleName",
"description": "模块介绍",
"version": "1.0.0",
"dependencies": [
"duxapp",
"duxui",
"duxappReactNative"
]
}
修改文件后,执行下面的命令,完成一个初始化的过程,这会安装RN相关的依赖,以及补全 RN 端相关的命令
yarn app --app=moduleName
添加配置文件
在之前的入门教程中我们已经创建了 index.js
配置文件, RN配置需要在同一个目录下创建 duxapp.rn.js
文件,内容如下,
configs/modeName/duxapp.rn.js
export default {
android: {
appid: 'cn.duxapp.modulename',
appName: 'APP名称',
versionCode: 1,
versionName: '1.0.0',
},
ios: {
BundleId: 'cn.duxapp.modulename',
appName: 'APP名称',
versionCode: 1,
versionName: '1.0.0',
}
}
android和ios都需要配置上,即便你只开发安卓端,否则无法正常编译
由于安卓包名限制条件,你的包名只能由小写字母组成,并不能像模块名称那样,使用驼峰命名
接下来使用如下命令为安卓创建证书,这需要你在搭建好安卓开发环境的前提下(JDK需要安装到默认位置,否则可能识别不到)
yarn duxapp android keystore --config=moduleName
--config=moduleName
首次出现,用来指定配置文件,意思是为这个配置文件生成证书,上面之前教程提到的大多数命令都能使用此参数,当模块名称和配置名称不一致时,就可以指定此参数
命令执行成功后会提示如下内容
请将下列配置配置到 duxapp.rn.js 的 android.keystore 中
{
storeFile: 'duxapp.keystore',
keyAlias: 'duxapp',
storePassword: 'xdKKwwZYenypmePk',
keyPassword: 'xdKKwwZYenypmePk'
}
根据这个提示将配置内容配置如下
export default {
android: {
appid: 'cn.duxapp.modulename',
appName: 'APP名称',
versionCode: 1,
versionName: '1.0.0',
// 添加到这里
keystore: {
storeFile: 'duxapp.keystore',
keyAlias: 'duxapp',
storePassword: 'xdKKwwZYenypmePk',
keyPassword: 'xdKKwwZYenypmePk'
}
},
ios: {
BundleId: 'cn.duxapp.modulename',
appName: 'APP名称',
versionCode: 1,
versionName: '1.0.0',
}
}
开始打包
如果你没有安装开发环境,先用官方提供的通用调试包,跳过这个步骤
接下来就能执行打包命令了
# 安卓端编译app命名,命令同时会弹出一个窗口启动RN代码服务
yarn android --app=moduleName
如果一切顺利,将会打包成功一个调试版本的安装包,如果你手机开启开发者选项,并且链接到电脑,将会把app打包安装到你的手机上
开始调试
启动app,设置你电脑的ip地址+端口8081,比如: 192.168.1.10:8081
,步骤如下
- 启动app,摇一摇弹出开发者菜单,点击
Settings
- 选择
Debug server host & port for device
- 输入
电脑端ip:8081
如192.168.1.10:8081
确定,并返回 - APP摇一摇弹出开发者菜单,点击
Reload
加载代码 - 首次启动加载完成大概率不会正常显示,需要结束APP进程重新启动
其他流程和Taro开发一致
使用这个 yarn android --app=moduleName
编译安卓的时候会自动启动RN服务,如果你没有编译过APP,而是使用的官方调试包,需要使用下面的命令启动RN服务
yarn start --app=moduleName
如果 yarn android --app=moduleName
弹出的代码服务加载异常,也可以尝试关闭那个弹出的命令行窗口,然后使用这个yarn start --app=moduleName
命令启动RN代码服务
自定义app图标
自定义app图标的方式也比较简单,执行一行命令,将你的logo文件命名为 logo.png
放在 项目配置目录下 configs/moduleName
,然后执行如下命令
yarn duxapp rn logo --config=moduleName
命令执行成功,将会生成app需要的尺寸,放置在配置文件夹下,然后重新打包
yarn android --app=moduleName