快速的React Native开发方法

crna.png

一. 背景

从某些方面来看,目前RN只给拥有Mac电脑的开发者提供了跨平台开发应用的能力,因为使用Windows并不能开发iOS应用.还有一些问题是iOS 程序员不会配置Android的编译环境,而Android程序员对Xcode也不了解,对于没有接触过移动开发的前端同学来讲...

因为搭建RN开发环境的问题,有些同学就直接放弃了...

因为以上原因,react-community提出了一个解决方案,可以让一个完全没有接触过RN的人,快速的开发RN应用,通过这个方案可以实现:

1. 不用再去搭建烦人的iOS, Android编译环境

2. 可以使用Windows开发iOS应用.

二. 工具

解决上述问题主要借助两个工具

1. create-react-native-app(简称CRNA)

2. Expo

第一个工具是电脑上用来创建RN应用的,第二个是手机上安装的应用(iOS, Android都有). iOS 到 AppStore 搜索 Expo下载, Android到 google play 下载. Expo同时提供了一个XDE的开发工具来做RN 开发, 官网地址: https://expo.io/

使用CRNA创建的RN应用知识不用安装iOS和Android的编译环境,但是node还是必须的,通过以下命令安装CRNA工具npm install -g create-react-native-app或者yarn global add create-react-native-app

安装好之后使用以下命令创建RN应用: create-react-native-app 项目名.使用这个命令创建的项目,文件夹中看不到iOS和Android工程目录,只有JS部分的代码.

创建好应用之后打开当前工程所在的目录,执行npm start或者yarn start来启动应用,启动应用的效果如下图

image

会自动生成一个二维码.这时候在手机上打开Expo 应用扫描这个二维码就可以打开刚才创建的RN应用,并且只要打开过一次,就会保留一个入口.如下图

image

或者可以将终端的地址输入到Expo App的输入框也可以安装,如下图:

image

image

点击上图的红框的加号调出搜索框

应用中的代码如下图:

image

Expo显示的界面如下图:

image

三. 注意点:

1. 在运行的过程中手机必须要保持和电脑处在同一个局域网内

2. 使用CRNA这种方式,不仅完全跳过了配置Android 和 iOS 编译环境的步骤;而且突破了硬件限制,不论你是什么平台的手机或者电脑都可以进行所有跨平台代码的编写和真机测试;

3. 这个工具知识用来体验或者RN的学习,如果真正需要发布到应用市场,还是需要iOS和Android编译环境.

create-react-native-app 官方地址: https://github.com/react-community/create-react-native-app/

四. 其他常用命令

1. 启动本地开发服务器npm start 或者 yarn start

2. 将APP运行在iOS设备上，仅仅Mac系统支持，且需要安装Xcode: npm run ios 或者 yarn run ios

3. 将APP运行在Android设备上，需要Android构建工具: npm run android 或者 yarn run android

4. 运行测试: npm test 或者 yarn test

五. 安装过程可能存在的问题

ERROR: npm 5 is not supported yet

这个错误主要是因为npm5一个bug所导致的.

解决方案: 执行npm i npm@4 -g 将npm5降级到npm4