说在前面:
因为ReactNative最近比较火,甚至招聘网站上一些大公司的招聘要求都有会ReactNative这一条。所以就试着来看一看。
工欲善其事必先利其器,首先,需要搭建一个环境,方便咱们写一个helloworld。
本人一直都是AndroidStudio开发Android,所以许多条件都满足了。例如:
1、安装JDK。
2、安装Android SDK。
只要是用AndroidStudio开发安卓程序的基本上上面两条都做到了。
3、设置Android的环境变量:
设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk),设置环境变量PATH:例如(PATH=>%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
4、安装Node.js。下载地址:https://nodejs.org/en/,下载安装文件,直接点击下一步,傻瓜式安装。
5、安装git,百度git,下载安装,一样是傻瓜式。https://git-for-windows.github.io/
下面是是关键。上面只是条件而已。下面正式接触到开发环境了。
6、在电脑硬盘创建一个文件夹,进入该文件夹使用git clone 输入git clone https://github.com/facebook/react-native.git
,下载文件。
7、下载完成之后,进入刚刚目录下的react-native目录下的react-native-cli目录,打开cmd,输入npm install -g
正式安装React Native。
8、创建RN项目,进入你希望创建项目的目录后,进入cmd,输入react-native init AwesomeProject
,等待一段时间(较慢)
这是在下载AwesomeProject项目,比较慢。
完毕之后,文件夹目录结构如下。
9、再次打开一个cmd,在命令行中进入项目目录,输入react-native start
,等待一段时间:
10、这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
11、重新启动一个新的命令行,进入项目目录,输入react-native run-android
,注意此时电脑上连接一个手机,确保手机和电脑连接了。
等待运行(如果是第一次运行,首先会下载gradle,时间较长)
手机程序运行起来之后,我们看看是在什么界面,我们连上和电脑一样的网络,确保在同一个网段之下。然后设置IP地址和端口号。
我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口
IP地址为电脑ip地址,IP地址可通过cmd -> ipconfig查看。端口为8081.
设置完毕后,返回界面,摇一摇,点击Reload。即可显示我们第一个ReactNative创建的Android小例子。