文档章节

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

d
 djonce
发布于 2017/04/27 19:13
字数 983
阅读 33
收藏 1
点赞 0
评论 0

由于以前一直用的是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
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
React Native与ExMobi技术路线探索

随着Facebook陆续开源React Native的iOS和Android版本,这种以JavaScript来开发原生APP的方式在移动应用开发圈里得到广泛关注,虽然React Native并不是第一个采用JavaScript编写原生APP的产品...

nandy007
2015/12/01
1K
9
React-Native 之 环境配置和简单使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在...

postdep
05/01
0
0
一篇文章部署ReactNative

刚进入android领域时,一直在思考能不能学一门语言,就可以运行在多个平台上,来减轻公司开发所带来的成本压力:哪怕代码能复用也好哪!之前学习了hybirdApp 开发,就是H5+原生,但是感觉性能...

qq_35703234
2017/09/18
0
0
Facebook React Native 配置小结

2015 年 9 月 15 号,React Native for Android 发布。至此,React 基本完成了对多端的支持。基于 React / React Native 可以: H5, Android, iOS 多端代码复用 实时热部署 目前使用 React ...

wei-spring
2015/10/04
0
0
React Native iOS环境搭建

感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下。 废话不多说了,下面简单的列出步骤吧。 1. 安装Homebrew Home...

mahb520
2015/11/30
4.1K
5
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云
2017/02/16
743
0
React Native Windows Android开发环境搭建

安装步骤: 1) ReactNative Android运行环境 (一) Python安装 (二) NodeJs安装 (三) React-native安装 (四) JDK安装 (五) Android SDK解压 (六) Gennymotion安装 2) ReactNative开发环境 (一...

恒源祥
2016/09/13
25
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mybatis中session.getMapper方法源码分析

0开始代码AuthorMapper mapper = session.getMapper(AuthorMapper.class); 1 DefaultSqlSession类 @Override public <T> T getMapper(Class<T> type) { //最后会去调用MapperRegistry.getMap......

writeademo
8分钟前
0
0
spring cloud zuul网关的作用

zuul一般有两大作用,1是类似于Nginx的网址重定向,但zuul的重定向的一般是整个spring cloud里在Eureka注册中心的模块. zuul: ignored-services: '*' sensitiveHeaders: routes: ...

算法之名
8分钟前
2
0
java按比例之原图生成缩略图

package com.wxp.test; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import javax.imageio.ImageIO; import sun.......

恋码之子
18分钟前
0
0
SpringCloud 微服务 (十五) 服务容错 Hystrix

壹 工作中的微服务架构,某个服务通常会被多个服务调用或者多层调用完成需求,如果某个服务不可用,导致一个系统功能不可用或者服务直接没用了的情况,这种情况称为雪崩效应 有A服务调用B服务,B服...

___大侠
20分钟前
0
0
Spring框架中的设计模式(五)

Spring框架中的设计模式(五) 通过以前的4篇文章,我们看到Spring采用了大量的关于创建和结构方面的设计模式。本文将描述属于行为方面的两种设计模式:命令和访问者。 前传: Spring框架中的...

瑞查德-Jack
22分钟前
0
0
解决phpstorm运行很卡问题!

phpStorm一旦达到这个临界值,所有智能提示、自动补全都失效了 这TM就很尴尬了,顿时感觉自己就是个废人了,纯手写代码跟便秘一样 众所周知phpStorm基于JAVA,那么这个内存限制肯定跟JAVA的虚...

sjcehui2010
25分钟前
0
0
javascript前端AES加密解密

参考了一下网上的代码加上自已的一些想法,修改,key也可以是中文, 要引入一个aes.js的js文件。 html代码 <html> <head> <title>AES加解密</title> <meta http-equiv="Content-Type"......

oisan_
29分钟前
0
0
MacOS和Linux内核的区别

有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我们来看...

六库科技
33分钟前
0
0
Vue.js-自定义事件例子

自定义组件的 v-model 2.2.0+ 新增 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。m...

tianyawhl
36分钟前
0
0
RobotThread.cpp

#include "RobotThread.h"RobotThread::RobotThread(int argc, char** pArgv, const char * topic) :m_Init_argc(argc), m_pInit_argv(pArgv), m_topic(topic){/** ......

itfanr
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部