react-native开发环境

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

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


RN(React-Native)-通俗的说就是跨平台开发吧,一套代码可以在安卓和ios上运行,针对ios而言其本质是对ios原生控件的一次封装,然后通过js调用相关函数,视图等。



学习网站

ES6 教程:http://es6.ruanyifeng.com/

ReactJS 教程:http://huziketang.com/books/react/

React Native中文网:https://reactnative.cn

react-native github:https://facebook.github.io/react-native/docs/getting-started.html

Native热更新:http://update.reactnative.cn/home


开发工具:webStorm(https://www.jetbrains.com

激活:在打开的 License Activation 窗口中选择 License server;在输入框输入网址 http://idea.codebeta.cn;点击确定即可。


配置环境(iOS与Android配置相同)

注意:在mac电脑上进行开发。

首先安装Homebrew(https://brew.sh

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

1、安装Node.js

(1)安装

brew install node

(2)镜像配置

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

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

2、安装Yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新

项目、运行打包服务(packager)等任务。

(1)安装

sudo npm install -g yarn react-native-cli

(2)镜像配置

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

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

3、安装Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。

(1)安装

brew install watchman

4、建议定期运行 brew update && brew upgrade watchman来使您的应用程序保持最新状态。

brew update
brew upgrade watchman

5、安装Xcode开发工具(步骤3前安装)

6、安装AndroidStudio开发工具(https://developer.android.com/sdk/index.html

(1)先安装JDK(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

(2)AndroidStudio的配置

a)在SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid

SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64

System Image

b)在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools

23.0.1(必须是这个版本)。然后还要勾选最底部Android Support Repository

c)确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入

到"~/.bash_profile"文件中:(译注:~表示用户目录,即/Users/你的用户名/,而小数点开头的文件在Finder中是隐藏的,并且

这个文件有可能并不存在。请在终端下使用"vi ~/.bash_profile"命令创建或编辑。如不熟悉vi操作,请点击这里学习)。如果你的

命令行不是bash,而是例如zsh等其他,请使用对应的配置文件

// 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效(否则重启后才生效)"source ~/.bash_profile"。

source ~/.bash_profile
可以使用"echo $ANDROID_HOME"检查此变量是否已正确设置。
echo $ANDROID_HOME


1、创建项目:react-native init 项目名称,如:

react-native init helloWorld

2、运行iOS项目(进入项目目录执行):react-native run-ios

react-native run-ios

3、运行Android项目(进入项目目录执行):react-native run-android

react-native run-android

4、或是启动Node服务器:react-native start

react-native start

猜你在找的React相关文章