ReactNative(1)--基础入门

ReactNative(1)–基础入门

Props
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。

State
使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用state。
一般来说，你需要在class中声明一个state对象，然后在需要修改时调用setState方法。
每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。

初学者应该牢记的要点：

• 一切界面变化都是状态state变化
• state的修改必须通过setState()方法
• this.state.likes = 100; // 这样的直接赋值修改无效！
• setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
• setState 是异步操作，修改不会马上生效

样式
所有的核心组件都接受名为style的属性。
这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。
你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

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

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default 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>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

高度与宽度
指定宽高：
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。
React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

弹性（Flex）宽高：
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

使用Flexbox布局
React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。
一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

Flex：
flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的flex属性值被分割成多个部分。

Flex Direction：
在组件的style中指定flexDirection可以决定布局的主轴。子元素默认值是竖直轴(column)方向。

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

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