文档章节

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

d
 djonce
发布于 2017/04/27 19:13
字数 983
阅读 46
收藏 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
1K
0
linux平台安装React Native遇到的坑

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

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

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

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

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

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

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

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

没有更多内容

加载失败,请刷新页面

加载更多

MySQL8.0.17 - Multi-Valued Indexes 简述

本文主要简单介绍下8.0.17新引入的功能multi-valued index, 顾名思义,索引上对于同一个Primary key, 可以建立多个二级索引项,实际上已经对array类型的基础功能做了支持 (感觉官方未来一定...

阿里云官方博客
26分钟前
3
0
make4.1降级 make-3.81、2错误

在编译 make-3.82 的时候出现如下错误提示 glob/glob.c:xxx: undefined reference to `__alloca'` 修改 /glob/glob.c // #if !defined __alloca && !defined __GNU_LIBRARY__ # ifdef __GNUC......

Domineering
27分钟前
2
0
Rainbond集群的安装和运维的原理

本文将解读Rainbond集群的安装和运维的原理,使用户基本了解Rainbond的安装机制和运维重点,便于用户搭建大型Rainbond集群。 1.Rainbond集群节点概述 1.1 节点分类 属性 类型 说明 manage 管...

好雨云帮
39分钟前
5
0
好程序员大数据学习路线分享UDF函数

1.为什么需要UDF? 1)、因为内部函数没法满足需求。 2)、hive它本身就是一个灵活框架,允许用自定义模块功能,如可以自定义UDF、serde、输入输出等。 2.UDF是什么? UDF:user difine fun...

好程序员官方
41分钟前
4
0
Groovy中 Base64 URL和文件名安全编码

Base64 URL和文件名安全编码 Groovy支持Base64编码很长一段时间。 从Groovy 2.5.0开始,我们还可以使用Base64 URL和Filename Safe编码来使用encodeBase64Url方法对字节数组进行编码。 结果是...

白石
44分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部