ReactNative第一步

技术的使命是解决企业的需求，目前考虑用RN实现现有app，虽然暂不考虑swift，但之所以使用RN，不仅因为成本、扩展性、灵活性等考虑，也是整个移动技术的趋势。

首先要知道学习RN，你需要哪些准备?
框架图

Paste_Image.png

Paste_Image.png

然后列出来一个计划（一周之内）：

---

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分钟之内吧），终于创建成功，目录结构如下

Paste_Image.png

这个时候有两种方式运行：
1、直接Xcode打开
2、

cd AwesomeProjectcd
react-native run-ios

再次经过漫长的编译运行，展示到模拟器上：

Paste_Image.png

Paste_Image.png

至此，环境已经搭建成功

2、RN基本使用方法

1、集成到现有项目中
2、RN集成出现的错误
3、详细学习RN

预先准备的知识：

Paste_Image.png

Helloworld

官网有个实时效果的例子，可以自己修改

Paste_Image.png

Props－参数

从中我们发现，component类型 source是props类型

Paste_Image.png

调用自定义component下的props属性： {this.props.name}

Paste_Image.png

State－状态

控制一个component有两种数据类型：props和state
props是父类来设置的，延续整个生命周期都是 固定的
state是可以改变的

在测试代码时一定不要忘记import中的元素

正常情况，需要在constructor中初始化state，使用setState赋值
从以下事例代码，可以发现：

• render()方法是默认之行的；
• constructor方法类似于初始化viewdidload()，也需要super()
• state是一个porps，showText是state中的一个属性
• 有很多自带方法，setInterval()就是定时器
• Blink中调用的this.props.text就是BlinkApp中的的值

Paste_Image.png

Style

RN中不需要使用特殊的语言和语法来设置style，只需要js就可以，所有的核心component都支持style属性
StyleSheet.create 可以在一个地方定义多个styles，这里注意，在有多个styles的地方:

｛｝中是用［］包含的

Paste_Image.png

Paste_Image.png

Height and Width

固定的设置方式：

Paste_Image.png

动态的设置方式：

Paste_Image.png

Layout with Flexbox

flexDirection就是View中数组的排列方式，并且默认是row顺序排放的，不是按照比例的，还有column属性

Paste_Image.png

内容适配：
justifyContent设置子控件的轴分布

• flex-start
• center
• flex-end
• space-around
• and space-between

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Align Items ：

以下设置的解释：
alignItems是flex-end，整体排最底部
justifyContent是center，则子控件居中
flexDirection是row，则横向排列子控件，方向：从左到右

Paste_Image.png

以下设置的解释：
flexDirection是row，则竖向排列子控件：从上到下
alignItems是flex-end，整体排最底部（右边）
justifyContent是center，则子控件居中

Paste_Image.png

学到这里，
感觉UI上的设置虽然没有难度，但是参数过多， 更多更深入的开打官方文档

Handling Text Input

• padding：10是设置距离顶部⬆️和左边距⬅️的距离
• onChangeText：就是监听输入框的变化，实时的保存给state中的text参数
• 以下map中的逻辑暂时没懂，等弄明白再更新

          {this.state.textProp.split(' ').map((word) => word && '').join(' ')}
        

Paste_Image.png

Using a ScrollView

ScrollView 一次性加载所有数据，ListView仅加载页面显示的数据
ScrollView可以设置同时横向／纵向滚动：horizontal／vertical

Paste_Image.png

Using a ListView

• dataSource

• renderRow

  
  
  

  Paste_Image.png