ReactNative: 搭建ReactNative开发环境

简介:

搭建ReactNative开发环境

不废话,具体步骤如下:

 

一、安装需要的软件

1、Homebrew

Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

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

译注:在Max OS X 10.11El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。

可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

 

2、Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。

brew install node

如果已经安装,可以将其更新到最新版本

brew upgrade node

如果之前手动安装过,根据提示,需要将brew管理的node和手动安装的node进行链接

brew link node

 安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpmcnpm安装的模块路径比较奇怪,packager不能正常识别!

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

 

3、Yarn

YarnFacebook提供的替代npm的工具,React Native的命令行工具(react-native-cli),可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

如果已经安装,可以更新全局的reactNative到最新版本

sudo npm update -g react-native-cli

 安装完yarn后同理也要设置镜像源:

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

如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install --save 某第三方库名。

 

 4、Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。译注:此工具官方虽然是推荐安装,但在实践中,我们认为此工具是必须安装,否则可能无法正常开发。

brew install watchman

 

二、测试安装结果

注意:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便FQ也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。

提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如react-native init ReactNativeDemo --version 0.44.3。注意版本号必须精确到两个小数点。

react-native init ReactNativeDemo  --version 0.44.3
cd ReactNativeDemo
react-native run-ios

 

三、官方文档

http://reactnative.cn/docs/0.49/getting-started.html#content

 

四、运行效果图

 

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
分类:  React Native

本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/7694252.html ,如需转载请自行联系原作者
相关文章
|
5月前
|
资源调度 前端开发 JavaScript
三分钟搭建React开发环境
三分钟搭建React开发环境
132 0
|
5月前
|
资源调度 前端开发 JavaScript
从零开始学习React-开发环境的搭建(一)
从零开始学习React-开发环境的搭建(一)
32 0
|
6月前
|
资源调度 前端开发 JavaScript
简单搭建react开发环境
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 目录 前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 总结 前言 安装前需要安装:node.js、vscode 一、node.js使用 运行Node.js command prompt,输入命令: npx create-react-app my-app (如下图) 安装完成截图如下: 至此,react安装完成,可以直接在npom控制台运行,我放到v..
24 0
简单搭建react开发环境
|
8月前
|
前端开发 应用服务中间件 API
解决分布式React前端在开发环境的跨域问题
解决分布式React前端在开发环境的跨域问题
151 0
|
10月前
|
JSON 前端开发 数据格式
从零搭建 Vite + React 开发环境 #112
从零搭建 Vite + React 开发环境 #112
198 0
|
前端开发
antd组件库封装23-配置react开发环境
antd组件库封装23-配置react开发环境
126 0
antd组件库封装23-配置react开发环境
|
Web App开发 前端开发 JavaScript
webpack手动配置React开发环境
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能.
1119 0
React-native 开发环境配置(win版本)
搭建开发环境 1、首先下载node.js 下载链接:https://nodejs.org/zh-cn/ ; 2、安装node.js; 3、安装完成,运行打终端输入:nmp -v 显示node.
1120 0