RN开发之Hello World

2016年12月30日

2016年，各大公司都在统一平台的开发上发力，有Facebook的React-Native，有阿里巴巴的Weex，也有微信的Mars组件、微信的小程序开发。从这里看，前端有一统天下的趋势。今天来学习下React-Native的开发，开启React-Native的Hello World历程。

RN的环境搭建

本文主要记录下Mac平台下，Android的RN项目搭建，默认已经安装了Android Studio。参照RN的官网教程：https://facebook.github.io/react-native/docs/getting-started.html，RN的中文教程（非官方但翻译的很好了）：http://reactnative.cn/docs/0.39/getting-started.html#content

安装yarn

yarn是Facebook的一个安装工具，貌似具有翻墙效果，会加速RN项目中，组件的下载过程。 yarn的官网地址，有介绍，有安装教程：https://yarnpkg.com/en/docs/install

brew install yarn

RN环境及初始化项目

//第一步 安装node环境
brew install node
brew install watchman


//第二步 安装RN组件
npm install -g react-native-cli


//第三步 初始化项目，并运行效果
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

Integration With Existing Apps

用Android Studio创建一个RnProject项目，然后按照官网教程，搭建RN环境：https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

//主要就是创建package.json文件
$ npm init

//创建rn环境，node_modules
$ npm install --save react react-native

//创建配置文件，干嘛用的没明白
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

//This creates a node module for your app and adds the react-native npm dependency. Now open the newly created package.json file and add this under scripts:
//添加在创建的package.json里面的scripts里面
"start": "node node_modules/react-native/local-cli/cli.js start"

//开启服务
$ npm start

//用gradle运行，第一次用我Android Studio运行，貌似有问题
gradle installDebug
分享到