React-native学习(一):构建第一个Android项目

注:本文使用的是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:
命令2 sudo 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

执行完命令后,设备上出现了如下界面
连接8081端口
执行了一会后,突然弹出一个要晃瞎人眼的界面

瞎了瞎了瞎了
界面上显示出了如下提示

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也不是很熟悉,所以之后仍需要多加探索,还没有实现一些可观的效果~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章