主要参考 https://reactnative.cn/docs/getting-started.html react-native中文网

IOS版

1、Node v10以上、Watchman 和 React Native 命令行工具以及 Xcode

先安装brew工具,这样便于后面安装,第一次安装可能比较慢,耐心等待。。。

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

安装完之后,由于默认使用了国外镜像源,速度较慢,得修改源地址为国内的。
)替换brew.git
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git )替换homebrew-core.git
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git

安装node

brew install node  这里可能会提示要你按照依赖包,按照所给出的提示安装即可

安装watchman

brew  install watchman
同样也修改镜像地址

npm config set registry https://registry.npm.taobao.org

--global npm config set disturl https://npm.taobao.org/dist --global

2、 React Native 的命令行工具(react-native-cli),Yarn是 Facebook 提供的替代 npm 的工具,安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

npm install -g yarn react-native-cli
修改镜像地址
yarn config set registry https://registry.npm.taobao.org--global  yarn config set disturl https://npm.taobao.org/dist --global 

3、React Native 目前需要Xcode 9.4 或更高版本,APP Store下载即可

4、初始化项目

react-native init AwesomeProject

5、编译并运行 React Native 应用

cd AwesomeProject

react-native run-ios
注意: 此步骤可能会提示xcrun: error: unable to find utility "instruments", not a developer tool or in PATH错误,

解决方法:

、sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/ 命令即可解决此问题

可能会提示Could not find iPhone  simulator--

解决方法:

、react-native run-ios --simulator="iPhone 6",运行时指定启动版本

 、打开项目文件node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js

然后,Check if your device version is correct, e.g: in line  console.log(version) 。在文件30行,对比是否是这个条件:Compare it with condition in line : if (version.indexOf('iOS') !== ) {

  注释掉的是version.indexOf('iOS') !== ,然后替换成

if (version.indexOf('iOS') !==  && !version.includes('iOS')) {
continue;
}

6、 再重新执行react-native run-ios --simulator="iPhone 6" 命令,如果成功就可以看到手机模拟运行的效果了

android版

1、下载adroid studio https://developer.android.google.cn/studio/

2、按照https://reactnative.cn/docs/getting-started.html上面给出的安装步骤依次操作即可,上面说是要翻墙,但好像不翻也可以!!!

需要注意的地方是在运行项目的时候,得先新建模拟器,不然在react-native run-android执行时,

会出现installDebug FAILED,网上说修改gradle版本,还有改distributionURL参数。本人都没改,在Android studio 新建好模拟器即可!!!

至此,以上就是本人在Mac 10.14.6 搭建react-native的过程及其过程中所遇到的问题,给小伙伴们提供个参考吧。

mac+react-native环境搭建的更多相关文章

  1. Ubuntu17.10 React Native 环境搭建

    React Native 环境搭建 环境:ubuntu17.10 安装依赖 必须安装的依赖有:Node.React Native 命令行工具以及 JDK 和 Andriod Studio. 安装nod ...

  2. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  3. 初学 React native | 环境搭建(在模拟器上运行)

    我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...

  4. Mac系统下React Native环境搭建

    这里记录一下在Mac系统下搭建React Native开发环境的过程: 1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.g ...

  5. React Native环境搭建(iOS、Mac)

    http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...

  6. react Native环境 搭建

    react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装 ...

  7. 逻辑性最强的React Native环境搭建与调试

    React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用, ...

  8. React Native 环境搭建踩坑

    React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-nat ...

  9. React-Native(一):React Native环境搭建

    第一步:安装jdk 从java官网下载jdk8 配置环境变量: JAVA_HOME:D:\Program Files\Java\jdk1.8.0_111 Path中追加:%JAVA_HOME%\bin ...

  10. react native环境搭建(含错误处理)

    1.  Python 2  注意,不要选择3.0及以上的,还不成熟 安装过程中一直 next就可以了,但是注意下图,勾选添加到系统环境变量 安装完之后cmd输入 python 查看是否安装成功. 补充 ...

随机推荐

  1. learning webrtc 使用node.js

    第二章 有使用node.js创建静态服务器的步骤 不过不够详细 下面以Windows为例 1.到官方网站下载安装包 然后安装 2.用管理员权限启动命令行 3.命令行窗口执行npm config set ...

  2. Python 使用PyQt5进行开发(一)

    Qt  是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI程序,比如控制台工具和服务器. 我们先简单使用Qt进行一个小工 ...

  3. JavaScript基础篇详解

    全部的数据类型: 基本数据类型: undefined Number Boolean null String 复杂数据类型: object ①Undefined: >>>声明但未初始化 ...

  4. C#中winform下利用ArcEngine调用ArcGIS Server发布的服务 AE9.3

    主要使用了AE中的IAGSServerOject接口及IMapServer接口.Private void GetServerTest_Click(object sender, EventArgs e) ...

  5. php5.6编译安装apache

    1.下载源码包wget 网址/php-5.6.30.tar.gz2.解压源码包tar -zxvf php-5.6.30.tar.gz3.创建一个安装目录mkdir /usr/local/php4.进入 ...

  6. 阶段3 1.Mybatis_12.Mybatis注解开发_7 Mybatis注解开发一对多的查询配置

    一对多的配置,一个用户对应多个账户 需要在Accout里面增加根据用户的uid查询的方法 在user里面指定子一对多的查询配置 换行显示 测试 把这里注销掉.测试延迟加载,代码注释掉后,延迟加载就没有 ...

  7. USB转换PS2接线原理

    https://blog.csdn.net/dfyy88/article/details/4540170 USB转换PS2接线原理 2009年09月10日 18:36:00 阅读数:13285 USB ...

  8. Linux常用命令梳理——文件管理(一)

    由于本人目前仍是萌新一枚,所以<Linux常用命令梳理>系列仅依照个人目前掌握的知识,对一部分命令进行梳理,目的是为了对之前学到的知识进行巩固.当然了,如果机缘巧合被大家看到了,也欢迎各位 ...

  9. LeetCode算法题-Goat Latin Easy(Java实现)

    这是悦乐书的第322次更新,第344篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第192题(顺位题号是824).给出句子S,由空格分隔的单词组成.每个单词仅由小写和大写 ...

  10. 【Python】我的第一个完整的小说爬虫

    写在开头 纪念我的第一个爬虫程序,一共写了三个白天,其中有两个上午没有看,中途遇到了各种奇怪的问题,伴随着他们的解决,对于一些基本的操作也弄清楚了.果然,对于这些东西的最号的学习方式,就是在使用中学习 ...