# learnRN

**Repository Path**: wjww/learnRN

## Basic Information

- **Project Name**: learnRN
- **Description**: react native的学习
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-05-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#官网
	http://facebook.github.io/react-native/

##中文官网：
	http://reactnative.cn/

##中文社区：
	http://bbs.reactnative.cn/

##github:
	https://github.com/facebook/react-native

#ES6学习手册和相关demo
	http://es6.ruanyifeng.com/
	https://github.com/ruanyf
	http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8


#Windows下安装开发环境

	1. 管理员身份运行cmd.exe，chocolatey的安装：
		@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

	2. py2的安装：
		choco install python2

	3. nodejs的安装：
		choco install nodejs.install

	4. nodejs的配置：
		npm config set registry https://registry.npm.taobao.org --global
		npm config set disturl https://npm.taobao.org/dist --global

	5. react-native的安装：
		npm install -g yarn react-native-cli

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

	6. NDK 10e 的安装

	7. 相关环境变量的配置... 

#初始化一个项目：
	react-native init [Pro Name]

#运行项目
	1. 方式一：react-native run-android

	2. 方式二：AS 配置相关参数，不一定是23.0.1，不一定是2.2.3  ...

#开启npm服务：
	npm install && npm start || react-native start

#开发工具推荐：
	1. http://www.jetbrains.com/webstorm/
	2. nuclide
	3. sublime

#Android和IOS指向同一个启动文件
	setup.js

#创建组件的方式
	1. ES6的方式创建组件
	2. ES5的方式创建组件
	3. 函数式定义无状态组件
	eg:HelloComponent.js

#组建的生命周期
	1. mount
	2. update
	3. unmount
	eg:LifeCycleComponent.js

#导入与导出
	1. 导出组件并使用导出的组件
	2. 导出变量或常量并使用导出的变量或常量
	3. 导出方法并使用导出的方法

	export default
	module.exports
	import *Component from '[PATH]./*Component';

#props的使用详解
	1. 什么是props  属性，描述一个组件的特征，是父组件传递给子组件的
	2. 如何使用props  this.props.*
	3. 默认属性和它的作用   defaultProps
	4. 如何对props进行约束和检查  PropTypes isRequired
	5. 小技巧之延展操作符  {...params}
	6. 小技巧之解构赋值  var {name, sex}=params;

#state使用详解
	1. 理解state：组件简单看成状态机，UI看成各种各样的状态，要改变UI的各种状态，只需改变state的状态，就会重新渲染UI

	2. 如何使用：eg:StateComponent.js

#REF
	1. 組件并不是真正的DOM节点，是存在于内存中的数据结构，叫做虚拟DOM，只有当它真正插入文档之后，才会变成真正的DOM，所有DOM的变动，都会发生在虚拟的DOM上，再将实际发生变动的部分反应在真正的DOM上面；REF：组件被渲染后，指向组件的一个引用，通过REF属性，可以获取真实的组件
	2. 使用：