React Native之环境搭建

前端之家收集整理的这篇文章主要介绍了React Native之环境搭建前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本系列文章博主将带领大家进入React Native的世界,学习React Native的知识。

一.环境搭建

开发平台:MacOS 10.11.6,所以本文将重点介绍Mac电脑的安装过程,不过Windows同学也不要灰心,最后也会给出Windows下的安装教程
1.安装Homebrew
Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件,打开终端,执行以下命令:

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

homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

sudo chown -R `whoami` /usr/local

2.Node安装

brew install node

安装完node后建议设置npm镜像以加速后面的过程(建议安装)

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

3.React Native的命令行工具(react-native-cli)安装

npm install -g yarn react-native-cli

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

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

安装软件时也可能会碰到目录不可写的权限问题,输入下面命令修复:

sudo chown -R `whoami` /usr/local

4.推荐安装的工具
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。

brew install watchman

Flow
Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow

注:安装过程中可能需要输入密码,直接输入自己的电脑密码就可以

至此已经安装完成,接下来

创建第一个项目:

1.切换到自己的项目目录(自己定义即可):

cd  /Users/Documents/ReactNative

2.创建第一个项目MyFirstApp

react-native init AwesomeProject

创建过程中可能需要一小会,稍等,项目截图如下:

ok,第一个项目新建完成,那么我们需要运行看一下效果

react-native run-ios 此为iOS平台,运行需安装Xcode,并打开模拟器
  react-native run-android 此为android,运行需安装Androidstudio,并打开模拟器

具体Xcode和Androidstudio安装方式,请自行安装。
运行项目时必须保证模拟器打开,或者手机连可调试
注:本人在安装时发现无论是iOS还是Android均是模拟器可以运行,手机不可以,检查发现必须ip相同才可以成功运行,这是一个坑,大家切记

运行截图如下:

目前我们已经成功运行了第一个项目,那么我们该使用什么工具来打开项目呢?这里推荐两个,WebStorm和Sublime Text,
WebStorm安装方式如下:
http://blog.csdn.net/sinat_17775997/article/details/53579414
因本人重点使用Sublime Text,故给出Sublime Text安装方式:
1.安装Sublime Text3(自行百度http://www.sublimetext.com/3 这个 so easy)
2.重点是需要为Sublime Text3安装插件才可进行开发
安装Package Control
默认Sublime3中没有Package Control(Preference下),需要进行用这个安装其他插件
http://www.cnblogs.com/luoshupeng/archive/2013/09/09/3310777.html
安装方式直接参考该网页,一般情况都需要手动安装,大家不要灰心,直接自己下载复制到Installed Packages/下重启即可
3. 安装完Package Control后,打开Sublime Text3,点击菜单栏”Preferences”–>”Package Control”

在打开的终端窗口,输入“install”,下方就会提示“Package Control:install package”

回车后提示该框,输入想安装的插件

React Native开发推荐的一些插件
ReactJS : 支持React开发,代码提示,高亮显示 ,介绍地址:点我
Emmet :前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录,神器,mac下的快捷键为:command+shift+T

4.导入项目:点击菜单栏的“Project”–>”Add Folder to Project” ,选择项目的目录,就将项目导入进来了。

ok,接下来就可以进行开发项目了!

参考链接http://reactnative.cn/docs/next/getting-started.html#content Windows用户可根据此文档进行安装和学习

原文链接:https://www.f2er.com/react/302780.html

猜你在找的React相关文章