注:本文使用的是Ubuntu系统进行构建,记录了从开始到成功构建的一些坑,Mac OS还请参见其他文章。
1. 安装React-native
教程说使用如下命令安装
命令1 npm install -g react-native-cli
紧接着出现了如下问题:
问题1 npm未安装
The program ‘npm’ is currently not installed. You can install it by typing:
命令2sudo apt install npm
按照指引使用sudo apt install npm,紧接着又出现了如下问题
问题1.1 依赖包未安装
The following packages have unmet dependencies:
npm : Depends: node-gyp (>= 0.10.9) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.
之后使用如下命令想一并把依赖包装上
sudo apt-get -f install
结果好像并不奏效,出现了如下提示
Reading package lists… Done
Building dependency tree
Reading state information… Done
0 upgraded, 0 newly installed, 0 to remove and 218 not upgraded.
经过一番查找,尝试了如下命令后再次尝试安装,提示和一开始一样,依然是依赖包的版本不符
sudo apt-get update
sudo apt-get upgrade
后又经一番查找,发现之前我修改过apt的源以求更快的下载,该apt的源有问题。使用如下命令编辑source.list文件,修改文件中的源,改为使用阿里云的镜像。
sudo gedit /etc/apt/sources.list
将文件中的源修改为如下内容:
deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
deb http://archive.canonical.com/ubuntu/ xenial partner
deb http://extras.ubuntu.com/ubuntu/ xenial main
之后再使用命令2 sudo apt install npm便可以安装npm了,之后执行命令1安装react-native
2. 创建一个react-native项目
使用如下命令在当前目录下创建一个react-native项目
react-native init 项目名
命令执行完成后会出现一个与项目同名的文件夹,进入这个文件夹后执行如下命令即可在当前adb连接的设备上安装这个项目。
react-native run-android
执行完命令后,设备上出现了如下界面
执行了一会后,突然弹出一个要晃瞎人眼的界面
界面上显示出了如下提示
Unable to load script from assets ‘index.android.bundle’. Make sure your bundle is packaged correctly or you’re running a package server.
问题2 缺少bundle文件
参考这篇文章
React-Native系列Android——Javascript文件加载过程分析
得知react-native是将整合和优化的JS文件,存放到assets资源文件目录中,就是index.android.bundle文件,而加载过程中找不到这个文件,所以我们需要进行以下操作
1.在项目的main文件夹中创建assets文件夹
mkdir android/app/src/main/assets // 当前处于当前项目根目录
2.执行react-native bundle命令创建JS整合文件
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/
--entry-file
: 应用入口文件,默认为项目根目录下的index.js(之前版本的react有区分android,ios,之后整合成了一个)
--platform
:系统平台,android或者ios选其一
--transformer
: babel转换器,默认使用\node_modules\react-native\packager\transformer.js
--dev
:是否开发模式,默认开启,此时不会进行JS混淆和压缩优化,方便开发者调试。
--bundle-output
: 最终整合的输出文件名,一般是index.android.bundle或index.ios.bundle
--bundle-encoding
:整合文件的编码格式,默认utf-8
--assets-dest
:整合资源文件存储目录,android打包时会定义为项目的assets资源编译临时目录。
3.重新运行项目
使用react-native run-android重新运行安装,之后就出现了如下界面,第一个项目构建完成!
本文记录了在配置过程及在配置过程中遇到的一些问题,由于我也是初学react,并且对JS也不是很熟悉,所以之后仍需要多加探索,还没有实现一些可观的效果~