React Native的安装和初始化(android /ios)

好久没有写东西,最近想学一下React Native,借此写一写笔记

React Native 的安装

使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm以及watchman和react-native-cli。

1.Mac安装Xcode 略过

2.Mac安装Homebrew。

Homebrew是以最简单,最灵活的方式来安装苹果公司在MacOS中不包含的UNIX工具。

    2.1打开终端输入   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    2.2 会有 点击return键和输入密码 如图

3. Mac安装node和npm

        已经安装好了Homebrew,可直接安装node和 npm。打开终端:

        输入命令行    brew install node 如图:

4.Mac安装watchman  命令行输入 brew install watchman

5.Mac安装flow  命令行输入 brew install flow

6.Mac 安装react-native-cli(用来开发React Native的命令行工具)

命令行输入 npm install -g react-native-cli

 

Mac电脑JDK和android-SDK 的安装

1.JDK安装

1.1在https://www.oracle.com/index.html网址可直接下载

1.2如图

等待下载完安装即可。

1.3 首次安装,需要做一些配置。

1.3.1 找到home文件路径

1.3.2 打开终端,创建文件  touch .bash_profile 

编辑 vim .bash_profile

将 以下 代码粘进去,如图

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_40.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH

1.3.3,验证是否成功 直接输入 java

2.通过androidstudio 安装 android-SDK

 2.1.安装完androidstudio后,单击androidstudio,右上角选择Preferences.

  

2.2.androidstudio安装的最新的SDK,开发兼容旧的安卓系统,还是需要安装不同版本的    sdk

2.3.等待安装完

2.4.安装android模拟器

打开Androidstudio,创建一个新工程,开始安装模拟器

等模拟器完成,进行测试是否安装成功。

 

如此便安装成功。

创建项目初始化

1.命令行创建一个NativeTest的项目( react-native init NativeTest )

先运行iOS,直接用Xcode打开,

运行之后,就会发现报错,找不到#import <React/RCTBundleURLProvider.h> 文件,这是因为 init 命令默认会创建最新的版本,而目前最新的 0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功,导致无法运行iOS项目。可以使用--version参数(注意是2个杠)创建指定版本的项目。例如react-native init MyReactiveApp --version 0.55.3。注意版本号必须精确到两个小数点。

再试一次,react-native init MyReactiveApp --version 0.55.3,打开iOS项目运行

这次就成功了

 再试试android运行一下,如图

 

完成

注:在运行ios时遇到这个问题

原因:找了很久,才发现是在运行时打开了翻墙软件,只要关闭就可以,吐血三升啊

 

 

 

 

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