技术的使命是解决企业的需求，目前考虑用RN实现现有app，虽然暂不考虑swift，但之所以使用RN，不仅因为成本、扩展性、灵活性等考虑，也是整个移动技术的趋势。
然后列出来一个计划（一周之内）：
1、RN环境搭建
2、RN基本使用方法
3、RN原理
4、RN语法
- RN中文网：http://reactnative.cn/docs/0.37/getting--started.html#content
- RN官网：http://facebook.github.io/react-native/docs/getting-started.html
5、RNdemo实践
6、设计模式
7、项目应用
1、RN环境搭建
Node.js,Watchman 安装：
brew install node
brew install watchman
React Native command line interface安装：
npm install -g react-native-cli
安装好之后，测试创建项目
react-native init AwesomeProjectcd
经过漫长的等待（5分钟之内吧），终于创建成功，目录结构如下
这个时候有两种方式运行：
1、直接Xcode打开
2、
cd AwesomeProjectcd
react-native run-ios
再次经过漫长的编译运行，展示到模拟器上：
至此，环境已经搭建成功
2、RN基本使用方法
1、集成到现有项目中
2、RN集成出现的错误
3、详细学习RN
预先准备的知识：
Helloworld
官网有个实时效果的例子，可以自己修改
Props－参数
从🌰中我们发现，<Image 是 component类型 source是props类型
调用自定义component下的props属性：
{this.props.name}
State－状态
控制一个component有两种数据类型：props和state
props是父类来设置的，延续整个生命周期都是 固定的
state是可以改变的
在测试代码时一定不要忘记import中的元素
正常情况，需要在constructor中初始化state，使用setState赋值
从以下事例代码，可以发现：
- render()方法是默认之行的；
- constructor方法类似于初始化viewdidload()，也需要super()
- state是一个porps，showText是state中的一个属性
- 有很多自带方法，setInterval()就是定时器
- Blink中调用的this.props.text就是BlinkApp中的<Blink text='abc' />的值
Style
RN中不需要使用特殊的语言和语法来设置style，只需要js就可以，所有的核心component都支持style属性
StyleSheet.create 可以在一个地方定义多个styles，这里注意，在有多个styles的地方:
｛｝中是用［］包含的
Height and Width
固定的设置方式：
动态的设置方式：
Layout with Flexbox
flexDirection就是View中数组的排列方式，并且默认是row顺序排放的，不是按照比例的，还有column属性
内容适配：
justifyContent设置子控件的轴分布
- flex-start
- center
- flex-end
- space-around
- and space-between
Align Items ：
以下设置的解释：
alignItems是flex-end，整体排最底部
justifyContent是center，则子控件居中
flexDirection是row，则横向排列子控件，方向：从左到右
以下设置的解释：
flexDirection是row，则竖向排列子控件：从上到下
alignItems是flex-end，整体排最底部（右边）
justifyContent是center，则子控件居中
学到这里，
感觉UI上的设置虽然没有难度，但是参数过多，更多更深入的开打官方文档
Handling Text Input
- <View标签中包含了2个控件：TextInput 和 Text
- padding：10是设置距离顶部⬆️和左边距⬅️的距离
- onChangeText：就是监听输入框的变化，实时的保存给state中的text参数
- 以下map中的逻辑暂时没懂，等弄明白再更新
<Text style={{padding: 10, fontSize: 42}}>
{this.state.textProp.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
Using a ScrollView
ScrollView 一次性加载所有数据，ListView仅加载页面显示的数据
ScrollView可以设置同时横向／纵向滚动：horizontal／vertical
Using a ListView
- dataSource
-
renderRow
Paste_Image.png
