文档章节

React Native开发环境的搭建-Mac平台

d
 djonce
发布于 2017/04/27 19:13
字数 983
阅读 42
收藏 1

由于以前一直用的是windows系统,对mac系统不熟悉,则在搭建的过程中遇到一些问题,所以记录下来,希望对大家有所帮助,同时以备自己查阅(防止自己忘记)。

在Mac平台开发React Native需要安装以下环境和工具:

1.Node.js

2.React Native命令行工具

3.java环境搭建

4.XCode/Android Studio

安装Node.js

第一种方法:

在Mac上安装Node.js可以通过Homebrew(是一个包资源管理器,用于安装Node.js和一些其他必需的工具软件。详细介绍需自行去查阅),Homebrew的安装官网给出的方法是在终端输入以下命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew安装成功后,接着在终端中输入以下命令:

brew install node

 第二种方法:

Node.js官网下载安装包进行安装

安装React Native命令行工具

Node.js安装成功后,开始安装React Native命令行工具,打开终端,在终端输入以下命令:

npm install -g react-native-cli

npm是安装node.js成功后就有的

java环境搭建

下载JDK(java的开发包)并安装,安装成功后配置java环境变量:

1.定位java在mac中的安装路径,在终端输入:

/usr/libexec/java_home

2.创建.bash_profile文件,在终端输入:

touch ~/.bash_profile

 touch命令是若文件不存在则创建该文件

3.打开.bash_profile文件,在终端输入:

open ~/.bash_profile

open用编辑器打开该文件

4.编辑.bash_profile文件,复制以下内容到 .bash_profile文件中(将在第一步中获得的java的安装路径赋给JAVA_HOME)

export JAVA_HOME=查找到的java安装路径
export PATH=$JAVA_HOME/bin:$PATH
export CLASS_PATH=$JAVA_HOME/lib:$CLASS_PATH

5.在终端输入:

source ~/.bash_profile

source命令是执行文件

6.验证环境变量是否成功,在终端输入:

java 或  $javac

 若提示命令找不到表示失败 或输入

   $ echo $JAVA_HOME

 看是否能成功打印java的安装路径

安装Xcode

直接到App Store进行下载安装

安装Android Studio

Android Studio下载地址:https://developer.android.google.cn/studio/index.html

Android SDK环境变量配置:

1.查看SDK的安装路径,Android Studio第一次使用一般会先到欢迎界面,点击Android Studio欢迎界面右下角Configure选项,之后再点击SDK Manager项,在弹出的窗口中可查看到SDK的安装路径(对于打开SDK Manager还有其他方式,这里就不做过多的介绍)

2.打开.bash_profile文件,在终端输入:

open ~/.bash_profile

3.编辑.bash_profile文件,复制以下内容到 .bash_profile文件中(将第一步中找到的SDK的安装路径赋值给ANDROID_HOME)

export ANDROID_HOME=查找到到sdk路径
export PATH=${PATH}:${ANDROID_HOME}/tools  
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

4.在终端输入:

source ~/.bash_profile

 5.验证android sdk环境变量是否设置成功,终端输入:

adb

创建 ReactNative项目

1.初始化项目

在终端输入:

react-native init 项目名称

项目初始化的时候会在npm上下载我们所需要的包,npm是国外站点会比较慢,下面我是通过配置npm镜像来加速(或使用科学上网工具),则收集了如下三种配置方法:

1).通过config命令

npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)

2).命令行指定

npm --registry https://registry.npm.taobao.org info underscore 

3).编辑 ~/.npmrc 加入下面内容

registry = https://registry.npm.taobao.org

2.项目初始化成功后,下面命令启动该工程,前提是模拟器或手机已经连接电脑 ,下面分别是启动android和ios的命令:

android:

cd 项目根目录  //进入项目的根目录
react-native run-android

ios: 

cd 项目根目录 //进入项目的根目录
react-native run-ios

最后

最后记录下:

React Native官方api文档

React Native中文网站  

React Native源码

© 著作权归作者所有

共有 人打赏支持
d
粉丝 1
博文 22
码字总数 16957
作品 0
杭州
私信 提问
React入门第二弹——React Native环境搭建

上一弹讲了React的内容,为什么这一弹突然就跳到了React Native了,其实,我想说的是我看中的还是RN,使用它能够实现跨平台; 原因下一弹再讲,先上环境搭建,可能在搭建环境的过程中会遇到若...

我家有宝
2016/01/14
952
0
linux平台安装React Native遇到的坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82631458 3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候f...

chenyu_insist
09/11
0
0
React Native macOS Android 搭建开发环境

这个讲的是React Native完整的原生开发环境。 这个环境的搭配,会根据你使用的操作系统、针对的目标平台不同,具体的搭配步骤就会有所不同;如果想同时开发iOS和Android也是没有问题的,你需...

帝子兮
12/03
0
0
iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠
2016/12/13
18
0
RN学习第一篇:MAC配置RN环境

我们在使用之前我们最基本的就是环境的搭建,不能搭建环境,一切白搭,这篇文章我就简单的介绍一下环境搭建过程,并且运行第一个项目 React Native搭建开发环境.png 文章目录 1、React Nativ...

辉哥de简书
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Integer使用双等号比较会发生什么

话不多说,根据以下程序运行,打印的结果为什么不同? Integer a = 100;Integer b = 100;System.out.println(a == b);//print : trueInteger a = 200;Integer b = 200;System.out.pr...

兜兜毛毛
21分钟前
0
0
CockroachDB

百度云上的CockroachDB 云数据库 帮助文档 > 产品文档 > CockroachDB 云数据库 > 产品描述 开源NewSQL – CockroachDB在百度内部的应用与实践 嘉宾演讲视频及PPT回顾:http://suo.im/5bnORh ...

miaojiangmin
32分钟前
1
0
I2C EEPROM驱动实例分析

上篇分析了Linux Kernel中的I2C驱动框架,本篇举一个具体的I2C设备驱动(eeprom)来对I2C设备驱动有个实际的认识。 s3c24xx系列集成了一个基于I2C的eeprom设备at24cxx系列。at24cxx系列芯片包...

yepanl
34分钟前
2
0
设计模式之工厂模式

本篇博文主要翻译这篇文章: https://www.journaldev.com/1392/factory-design-pattern-in-java 由于翻译水平有限,自认为许多地方翻译不恰当,欢迎各位给出宝贵的建议,建议大家去阅读原文。...

firepation
今天
5
0

中国龙-扬科
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部