简介
环境安装
helloWorld
项目结构
android的gradle依赖
react本身的一些概念（如JSX，组件，state）
SectionList例子
学习地址： https://reactnative.cn
常见问题及错误。
----------------------------------------------------------------------------------------------
首先看下分别在android和ios上运行的一个普通列表页面效果，用的是SectionList：（高性能的分组(section)列表组件）
正文：
简介：
•ReactNative 使用 JavaScript和 React编写应用，利用相同的核心代码就可以创建 Web，iOS 和Android 平台的原生应用
•app分类的话：
• webapp：移动端的web页面，纯浏览器应用。
• native-app：Java或者oc、swift开发的app，用的本地的组件以及布局。
• hybrid-app：介于以上两者之间。即有原生的组件，又封装了webview在里面 以便渲染web组件。
• react-native：是属于native app，渲染完全是本地方式，不靠webview。写代码的方式又是web前端。
环境和开发工具的安装：
•As、xCode、jdk、git，VirtualBox以外
•
•3、Homwbrew,mac系统的包管理器，卸载只要uninstall即可，不用怕卸不干净
•4、Node.js
遇到的问题：装homebrew，一直报错
原因xcode版本太旧，然后升级。Xcode
是7.0以上的
node安装完毕
5、Yarn，npm。命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务
npminstall -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
npm包管理，去下载各种第三方依赖。
•Android需要的sdkPlatform：
•SdkTools
•ANDROID_HOME环境变量，修改profile文件
如何新建一个项目：
•命令行
React-native
init
helloWorld
•装完环境首次初始化项目需要翻墙，但时间比较长，所以这个过程出现的错误可能是网络错误。
•我们来看一下初始化后的项目生成了哪些代码
项目结构
•最外层可以说是Native项目壳
•index就可以看成是rn项目的ios和Android入口，入门项目中就是在这两个文件中进行页面的开发
•
•package.json就关键了，功能应该是类似我们Android项目中的build.gradle，说明整个Rn项目的名称，版本号，以及需要的依赖等。
node_modules，这个目录是node通过解析package.json下载的相关依赖。
拷贝别人的项目的时候这个完全不需要拷贝，我们只需要对好package.json，
然后通过npm install命令，就可以重新生成对应的node_modules目录。
备注：其中node_modules和 package.json都是NodeJS相关的目录
android和ios文件夹是原生的项目代码。
运行项目：
react-nativerun-android 或 react-nativerun-ios
如果提示devide的异常，不一定是devide没有连接成功，仔细查看details的提示
解决：小米手机设置->开发者选项->启用MIUI优化 关闭
Component，state， Props：
•Component组件：
•ListViewButtonScrollViewText等
•
•State（状态）：
•我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
•
•Props（属性）：
•大多数组件在创建时可使用参数来进行定制。用于定制的这些参数就称为props（属性）。
•以常见的基础组件Image为例，在创建一个图片时，可以传入一个名为source的prop来指定要显示的图片的地址，以及使用名为style的prop来控制其尺寸。
Jsx语法：
•React使用 JSX来替代常规的 JavaScript。
•JSX 是一个看起来很像 XML 的JavaScript 语法扩展。
•它是类型安全的，在编译过程中就能发现错误。
•这是 Facebook 对ECMAScript 的扩展，即 JavaScript语法扩展，基于 XML 样式
•
SectionList组件：
•SectionList：
•高性能的分组(section)列表组件，支持下面这些常用的功能：
•跨平台。
•支持水平布局模式。
•行组件显示或隐藏时可配置回调事件。
•支持自定义行间分隔线。
•支持下拉刷新。
•支持上拉加载
•接下来看一下他的代码
•App.js文件
•文件内容主要分为三部分：
•(1) 引入需要的组件
•比如需要 react 中的Component，需要 react-native中的 View，跟 Java类似。
•(2) 定义新的组件
•继承 Component 定义新的组件，组件的render 函数返回一个 View，View 内包含一个Text 控件。
•styles为样式，跟 CSS类似。
•(3) 注册组件
•AppRegistry是运行RN Apps 的 JS切入点，App的根组件需要通过 AppRegistry.registerComponent注册。
总结：
•几个常用的命令
•react-nativeinitHelloWorlds
•新建工程，其中 HelloWorlds为工程名，在工程目录下运行
•react-nativerun-android
•运行android项目
•或者
•react-nativerun-ios
•运行ios项目
•React Native的优势：
•相对Hybirdapp或Webapp：
•不用Webview，摆脱Webview很多交互和性能问题
•有较强的扩展性
•相对于Native app：
•可以通过更新远端JS，直接更新app