配置React Native环境及解决运行异常
一. 安装Homebrew:
Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki。
brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默认安装了ruby":
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
等待一段时间后会出现
Press RETURN to continue or any other key to abort
敲回车后提示输入你的电脑密码:(输入密码的过程中终端不会有任何变化)
输入密码后提示
Downloading and installing Homebrew...
继续耐心等待..
二. 安装Node.js:
使用 Homebrew 来安装nvm,watchman 和 flow.(建议每次用Homebrew的时候先更新brew,命令:brew update )
1,安装nvm:
终端中输入:
brew install nvm
最后终端会提示
大概意思就是如果没有.nvm文件的话就要创建一个,终端中输入
mkdir ~/.nvm
就可以创建.nvm文件了
,然后去~/.bash_profile或者在shell的配置文件中配置如下内容:
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
具体操作如下
先进入home目录: cd ~
打开.bash_profileopen文件:
open .bash_profile
如果文件不存在 就创建一个
touch .bash_profile
打开后把需要配置的内容复制进去然后保存退出
现在NVM算是安装完成了.
2.使用NVM安装node.js
终端输入命令:
nvm install node && nvm alias default node
注:如果顺利安装完成可跳过下面步骤,直接进入第三步,进入安装watchman和flow环节.
nvm 默认是从http://nodejs.org/dist/下载的, 国外服务器, 必然很慢,
好在 NVM 以及支持从镜像服务器下载包, 于是我们可以方便地从七牛的 node dist 镜像下载:
$ NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/dist nvm install 0.11.11
于是你就会看到一段非常快速进度条:
######################################################################## 100.0%Nowusingnode v0.11.11
如果你不想每次都输入环境变量NVM_NODEJS_ORG_MIRROR, 那么我建议你加入到.bashrc文件中:
# nvmexportNVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/distsource~/git/nvm/nvm.sh
接着终端输入命令:
nvm install node && nvm alias default node
如果使用NVM一直安装失败.可以尝试直接使用Homebrew安装node: brew install node
三. 安装watchman和flow:
终端输入
brew install watchman
brew install flow
一切顺利
建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。
brew update && brew upgrade
四. 初始化项目及解决运行异常
初始化项目
首先安装Xcode6.3或更高版本.
完成后,终端执行
npm install -g react-native-cli
react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装react-native这个命令行,你只需要做一次即可。
接着
react-native init AwesomeProject
这一条命令获取 React Native 的源代码和依赖包,然后在AwesomeProject/iOS/AwesomeProject.xcodeproj创建一个新的 Xcode 项目,并且在AwesomeProject/android/app下面创建一个 gradle 项目。这个命令初始化的项目在你的用户目录下.
如果想初始化到桌面上需要 cd 到桌面 然后在执行 react-native init AwesomeProject 这个命令。
打开项目的方式
To run your app on iOS:
cd /Users/BlueCity/Desktop/hello
react-native run-ios
- or -
Open ios/hello.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/BlueCity/Desktop/hello
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
解决运行异常
进入项目根目录后,使用 run-ios 指令启动该iOS APP:
- react-native run-ios
对于版本高于0.45的创建项目,也许你会看到如下错误:
- Error:
- Build failed:
- Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...
- Print: Entry, ":CFBundleIdentifier", Does Not Exist
对应的直接点开.xcodeproj 运行相关的错误信息
1、降级版本方案
本人经过多方查找,发现是创建项目下载安装node依赖模块时的资源缺失问题,目前最新的0.45及以上版本需要下载boost库,该库过大,导致下载出问题,参考:
https://github.com/facebook/react-native/issues/14368
https://github.com/facebook/react-native/issues/14447
解决方案有两种,如果不追求新版本新特性,可以降低创建项目的版本,使用 --version 指令明确设置项目版本:
- react-native init MyApp --version 0.44.3
2、替换资源文件方案
依然希望使用新版本的解决方案则是手动下载相关文件替换:
下载如下四个相关文件放到项目根目录下的 .rncache 目录下,进行替换:
下载地址:https://pan.baidu.com/s/1kV5iVzD.
下载后替换:
- cd ~/.rncache
- cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/
依次使用 cp 指令复制替换四个文件;
然后删除第三方库文件,在 node_modules/react-native/third-party/ 目录下:
- rm -r project/node_modules/react-native/third-part
再次执行启动程序:
- react-native run-ios
发现可以正常运行了,接下来我们可以在编辑器里编辑我们的项目了,如我们的react-native入口js文件– index.ios.js 文件,刷新即可看到变更。
配置React Native环境及解决运行异常的更多相关文章
- 配置React Native环境
一. 安装Homebrew: “Homebrew installs the stuff you need that Apple didn’t.——Homebrew OS X 更完整”. Homebr ...
- Mac 配置 React Native 环境
OSX系统,这里假定你是iOS开发人员 Homebrew 是需要的,只有安装了Homebrew才能继续安装watchman和flow 安装 Node.js 4.0 或者更新的版本. 使用 Homebr ...
- 初学 React native | 环境搭建(在模拟器上运行)
我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,配置环境时出错原因主要是node java python ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- Mac配置React Native开发环境
一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提 ...
- 谈谈React Native环境安装中我遇到的坑
谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...
随机推荐
- 原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板
原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板 一.主要实现以下功能:1.用鼠标选择单元格(可谓连续单元格,也可为不连续的)后,按照要求格式“证件号码:+选定内容+“,”+”选定内 ...
- 关于使用mybatis的一个惨痛教训
事情大概是这样的: 某个时刻之后所有的交易都崩溃了,查看数据库得知所有的数据都变成一样的了!!! 再查看log,发现执行了这样的语句:UPDATE XXX SET c1=v1,c2=v2 ...,没有 ...
- 用OpenGL实现粒子的随机运动
一.目的: 掌握OpenGL中粒子的绘制.随机数的使用 二.代码: Github地址 #include "stdafx.h" #include <GL/glut.h> ...
- e801. 创建一个JProgressBar组件
A progress bar is used to visually indicate how much a task has been progressed. A progress bar can ...
- dendrogram 和 barplot 的组合
示例代码: data <- mtcars[1:10, ] hc <- hclust(dist(data)) hcd <- as.dendrogram(hc) par(mfrow = ...
- 基于Redis实现分布式锁以及任务队列
一.前言 双十一刚过不久,大家都知道在天猫.京东.苏宁等等电商网站上有很多秒杀活动,例如在某一个时刻抢购一个原价1999现在秒杀价只要999的手机时,会迎来一个用户请求的高峰期,可能会有几十万几百万的 ...
- Single Pattern(单例模式)
单例模式是一种常用的软件设计模式.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源.如果希望在系统中某个类的实例只能存在一个,单例模式是最好的 ...
- 在Android中,px,dp,dip,sp的不同之处
最近在学习Android开发,一直没有弄清楚px,dp,dip,sp的区别.今天正好有时间,就花时间研究了一下. 众所周知,Android厂商非常多,各种尺寸的Android手机 ...
- 英文版Ubuntu18.10安装搜狗输入法过程(图文并茂,亲自尝试!)
英文版Ubuntu18.10安装搜狗输入法过程 过程比较艰辛,折腾了好长的时间,不过最终还是装好了,特记录一下! 首先去搜狗输入法网址下载Linux版本:https://pinyin.sogou.co ...
- 虚拟机中安装linux系统步骤
参考:http://blog.csdn.net/u013111221/article/details/50856934 后面参考:http://blog.csdn.net/chenweitang123 ...