1

第一次接触 react native 就卡在装环境了,环境装不上一切都完蛋,所以在此记录一下;

引言

React Native是Facebook开源的,在Javascript和React的基础上构建原生的Android和IOS应用的平台。

clipboard.png

ReactNative的文档地址有多个,如果你英文够好,就去研读官方文档吧,
如果读原文比较吃力,中文文档也是不错的选择。

开发工具

  • WebStorm/VS Code/Sublime
  • Android Studio
  • XCode (IOS开发依赖)在Appstore直接下载

环境要求

Homebrew:安装教程 http://brew.sh/ ,Mac上的包管理软件
Node.js : https://nodejs.org/en/
watchman:https://facebook.github.io/wa...
facebook的开源的一个文件监视系统。
flow:http://flowtype.org/ facebook开源的一个JavaScript静态检查工具

安装

安装Homebrew:

/usr/bin/ruby -e "$(curl-fsSLhttps://raw.githubusercontent...)"

使用Homebrew安装node.js:

brew install node

安装watchman:

brew install watchman

安装flow :

brew install flow

更新

如果已经安转了以上的软件,需要更新到当前最新版本。
首先更新Homebrew的版本库:

brew update

更新Homebrew库的内容:

brew upgrade

清除不再使用的资源:

brew cleanup

如果之前已经安装好了所有软件,那么你可以直接安装react-native

安装react-native

npm是nodejs的包管理,使用npm可以安装nodejs的包,react-native也是nodejs的一个包。
使用npm安装react-native:

npm install -g react-native

安装react-native命令行工具:

npm install -g react-native-cli

运行命令:(查看安装结果)

react-native -v

得到结果

react-native-cli: 2.0.1
react-native: 0.60.5

react-native安装成功

初始化react-native项目

新建第一个react-native项目

react-native init app

clipboard.png

在当前目录下面多了一个app的项目,进入app项目。

运行ios:

react-native run-ios

运行Android

react-native run-android

运行react-native项目的时候首先会使用react-native start启动一个端口为8081的服务,用来提供JavaScript代码。

效果:

clipboard.png

问题

在初始化react-native项目时遇到一个问题,报错如下:

clipboard.png

提示:没有/usr/bin目录的写入权限,

自己的想法

最开始想到的没有写入权限,就用sudosudo可以解决一切,但然而并不好用;
之后有给文件夹了可写可读可执行(777)权限 ,还是不好用,继续报同样的错误。

还是Google一下吧

解决办法(一条命令解决问题)

sudo gem install cocoapods -n /usr/local/bin

参考stackoverflow文章


潘佳琦
894 声望34 粉丝

为 API 生,为框架死,为 debug 奋斗一辈子;