React Native开发环境的搭建-Mac平台
博客专区 > djonce 的博客 > 博客详情
React Native开发环境的搭建-Mac平台
djonce 发表于10个月前
React Native开发环境的搭建-Mac平台
  • 发表于 10个月前
  • 阅读 29
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

由于以前一直用的是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源码

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 19
码字总数 16957
×
djonce
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: