Match的React Native入门之旅

这是一篇学习笔记，注意事项的文章。
文中的资料绝大部分出自React中文网

一 搭建开发环境

运行

react-native init AwesomeProjectcd AwesomeProjectreact-native run-android

三 State（状态）

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（ES5:getInitialState方法来初始化state），然后在需要修改时调用setState方法。

---

五 样式

只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript**对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高**，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

class LotsOfStyles extends Component {  render() {    return (      <View>        <Text style={styles.red}>just red</Text>        <Text style={styles.bigblue}>just bigblue</Text>        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>        <Text style={[styles.bigblue,{color:'black'}]} > {display}</Text>      </View>    );  }}const styles = StyleSheet.create({  bigblue:{    color:'blue',    fontWeight:'bold',    fontSize:30,    color:'red',  }});

六 高度与宽度

指定宽高

在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。(dp)

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

弹性宽高（Flex）

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

此时子控件除非强制制定width height 才能显示

// 试试去掉父View中的`flex: 1`。      // 则父View不再具有尺寸，因此子组件也无法再撑开。      // 然后再用`height: 300`来代替父View的`flex: 1`试试看？      <View style={{flex: 1}}>        <View style={{flex: 1, backgroundColor: 'powderblue'}} />        <View style={{flex: 2, backgroundColor: 'skyblue'}} />        <View style={{flex: 3, backgroundColor: 'steelblue'}} />      </View>

七 使用Flexbox布局

flexDirection(方向) justifyContent（主轴分布方式） alignItems（次轴分布方式)
使用flexbox规则来指定某个组件的子元素的布局。

一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。译

React Native中的Flexbox的工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

Flex Direction

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

// 尝试把`flexDirection`改为`column`看看      <View style={{flex: 1, flexDirection: 'row'}}>        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />      </View>

Justify Content(主轴)

在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between。

和Android新出的ConstraintLayout很相似是不是，因为ConstraintLayout就是模仿flexible 布局的产物

/ 尝试把`justifyContent`改为`center`看看      // 尝试把`flexDirection`改为`row`看看      <View style={{        flex: 1,        flexDirection: 'column',        justifyContent: 'space-between',      }}>        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />      </View>

Align Items（次轴）

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。

可参考[布局样式属性]:http://reactnative.cn/docs/0.44/layout-props.html

八 处理文本输入

TextInput是一个允许用户输入文本的基础组件。
它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。
另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

“`
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ”};
}

render() {
return (