从0开始配置React-Native环境,运行第一个React-Native应用

前端之家收集整理的这篇文章主要介绍了从0开始配置React-Native环境,运行第一个React-Native应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从最近对React-Native的研究来看,我觉得是时候从0开始学它并引入到实践中了。目前我负责Android这块,之前也有半年的Js、半年的PHP开发经验,曾经那时可谓样样通,样样不精(其实我还有1年的C、1年的C++编程经验,甚至Html网站也开发过)。我有一台没有配置过homebrew、atom、nuclide的mac air,就从这里开始喽。

首先,找到homebrew(类似功能的还有macports)的官网,根据提示,在终端中运行命令下载安装:

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

附注:

1),遇到文件夹访问权限问题,需要在上述安装命令前使用sudo取得文件夹访问权限。

2),如果遇到已安装的提示,可根据需要先卸载旧的配置文件,重新运行上述安装指令,卸载命令会在提示中出现。

3),安装完homebrew后,需要配置它的环境变量,这样才可以在终端中正常运行安装命令

export PATH=$PATH:/usr/local/bin/

其次,安装watchman(监听文件变化)、flow(JS静态语法检查),这些都是辅助开发react-native应用的工具

brew install watchman
brew install flow

找到atom的官网,下载并解压atom安装包,运行主程序,安装Nuclide(React Native应用编辑、运行IDE)

1)在Atom-》Preferences中点击Install,在输入框中输入Nuclide,点击Install安装即可

2)安装完Nuclide之后,需要再次找到Nuclide,点击Setting选项,确保下面这处选项出于选中状态(这个是控制Nuclide相关工具栏的)


3)退出并重新进入Atom,你会看到下图,到这里你就成功了一半



打开finder,新建一个React-Native项目目录,在终端中cd到此目录下,使用React命令初始化项目

react-native init Demo --verbose
然后打开Atom,Add project folder,将Demo目录加入到IDE中,到这里,你就打开了一个项目,双击index.os.js,就可以自由自在的敲代码

通过终端命令运行项目:

$ react-native run-ios//iOS
$ react-native run-android//Android

另外一种运行项目方式是在Atom中打开终端选项(command+shift+p),再输入运行命令

附注:调试命令 react native debug

猜你在找的React相关文章