学习交流: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 APIs、Android
SDK Platform 23、Intel x86 Atom System Image、Intel 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