目录

1.React Native组件属性(Props,State)

1.1Props

1.1.1Props是什么？

1.1.2组件默认属性

1.1.3为组件(Component)自定义属性

1.2State

1.2.1State是什么

2.Flexbox布局

2.1Flexbox是什么

2.2Flexbox基础知识

2.3Flexbox主轴和侧轴（次轴）

2.4Flexbox布局常用属性

2.4.1flexDirection

2.4.2justifyContent

2.4.3alignItems

2.4.4flex

3.CSS样式

3.1. 视图边框

3.2. 尺寸

3.2.1. 设置宽高

3.2.2. 外边距

3.2.3. 内边距

3.2.4. 相对定位和绝对定位

---

1.React Native组件属性(Props,State)

1.1Props

1.1.1Props是什么？

类似Java中类内部定义的常量，定义并赋值以后不可以修改，示例

public class Command {
    // Service向Activity发送的跨进程指令
    public static final String DISC_REQUEST = "DISC_REQUEST";
}

a.大多数组件(Component)在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）；

b.props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变；

c.对于需要改变的数据，我们需要使用state；

d.涉及页面显示变化的数据需要通过state更新数据；

e.获取属性值方法this.props.name(属性名)

1.1.2组件默认属性

常见的组件(Component)例如Image组件，RN已经为我们定义了需要设置的属性source(设置图片地址),style(控制图片尺寸)等；

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
        //为属性设置值
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

1.1.3为组件(Component)自定义属性

获取自定义的props属性的name值

class Greeting extends Component{
    render(){
        return (<View style={{alignItems:'center'}}>
         <Text>Hello {this.props.name}</Text>
        </View>);
    }
}

为Greeting组件设置name属性

export default class ViewColoredBoxesWithText extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
                <Greeting name={'Rexxar'}/>
                <Greeting name='Jaina' />
                <Greeting name='Valeera' />
            </View>
        );
    }
}

1.2State

1.2.1State是什么

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

b.一般来说，你需要在 constructor 中初始化state（译注：这是 ES6 的写法，早期的很多 ES5 的例子使用的是 getInitialState 方法来初始化 state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

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

class Blink extends Component{
    constructor(props){
        super(props);
        //在constructor构造函数中初始化state
        this.state = {isShowingText:true};
        // 每1000毫秒对showText状态做一次取反操作
        setInterval(()=>{
            //更新state中值
            this.setState(previousState=>{
                return {isShowingText:!previousState.isShowingText};
            });
        }, 1000)
    }

    render(){
        // 根据当前showText的值决定是否显示text内容
        if(!this.state.isShowingText){
            return null;
        }
        //通过this.props.属性名获取属性值
        return(<Text>{this.props.text}</Text>);
    }
}

export default class BlinkApp extends Component {
    render(){
        return (<View>
            //为Blink组件设置text的属性值
            <Blink text='I love to blink' />
            <Blink text='Yes blinking is so great' />
            <Blink text='Why did they ever take this out of HTML' />
            <Blink text='Look at me look at me look at me' />
        </View>);
    }
}

示例说明：每次调用setState时，BlinkApp 都会重新执行 render 方法重新渲染。这里我们使用定时器来不停调用setState，于是组件就会随着时间变化不停地重新渲染。

state使用注意事项：

a.一切涉及界面变化的都是state的变化；
b.state典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后通过更新state的值，然后重新执行render渲染页面显示；
c.state的修改必须通过setState()方法
this.state.likes = 100; // 这样的直接赋值修改无效！
setState 是一个 merge 合并操作，只修改指定属性，不影响其他属性
setState 是异步操作，修改不会马上生效

2.Flexbox布局

在RN开发中通常会选用Flexbox布局，使用这套布局会提高效率；

2.1Flexbox是什么

弹性布局（flexible box）模块（目前是w3c候选的推荐）旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。
最重要的是弹性盒子布局与方向无关，相对于常规的布局（块是垂直和内联水平为基础），很显然，这些工作以及网页设计缺乏灵活性，无法支持大型和复杂的应用程序（特别当它涉及到改变方向，缩放、拉伸和收缩等）。
注意： Flexbox布局是最合适的一个应用程序的组件，以及小规模的布局，而网格布局是用于较大规模的布局。

2.2Flexbox基础知识

由于flexbox是一个整体模块，而不是单一的一个属性，它涉及到了很多东西，包括它的整个属性集。它们之中有一些是在父容器上设置(parent element, known as "flex container") ，而有一些则是在子容器上设置 (said "flex items")。·

如果经常布局基于块和内嵌流方向，柔性布局基于“柔性流动方向”("flex-flow directions")。请看看这个数字从规范，解释背后的柔性布局的主要思路。

基本上，项目将制定了以下任一主轴（从 main-start 到 main-end）或十字轴（(从 cross-start 到 cross-end）。

2.3Flexbox主轴和侧轴（次轴）

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

侧轴（次轴）：在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

主轴和侧轴（次轴）是相互垂直的；主轴主要决定子元素的排列顺序，侧轴决定子元素在侧轴方向的排列顺序；

2.4Flexbox布局常用属性

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

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

2.4.1flexDirection

flexDirection控制容器中元素的显示方向。row从左到右，column从上到下，你可以猜出其他两个做什么。它的工作方式类似于CSS中的flex-direction，但默认为column。

flexDirection：是枚举类型，值为enum('row', 'row-reverse', 'column', 'column-reverse')四个；

row：主轴水平方向，从左到右显示；

row-reverse：主轴水平方向，从右到左显示；

column：主轴垂直方向，从上到下；

column-reverse：主轴垂直方向，从下到上；

2.4.2justifyContent

justifyContent属性指定子元素按照主轴方向的排列方式，子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around、space-between以及space-evenly。默认值为flex-start；

justifyContent：是枚举类型，enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')

flex-start：子组件沿着起点方向显示，如果显示水平方向，则从左侧开始显示；如果显示垂直，则从上向下显示；

flex-end：子组件沿着终点方向显示，如果显示水平方向，则从右侧开始显示；如果显示垂直，则从下向上显示；

center：并不是某个组件剧中显示，而是所有子组件剧中显示；

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-evenly：所有子元素平分剩余空间，每个子元素之间距离相等；

2.4.3alignItems

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

alignItems：是枚举类型，enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')

flex-start：子元素沿着次轴起点的方向显示；

flex-end：子元素沿着次轴终点的方向显示；

center：子元素在次轴剧中显示；

stretch：如果指定次轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

baseline：如弹性盒子元素的行内轴与次轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

2.4.4flex

flex：表示子元素所占的比例，flex在 RN 中只能为整数值；比如两个组件在同一个父容器中，一个flex为 2，另一个flex为 1，则两者的尺寸比为 2：1。

示例：

可以实际修改每个属性的值看看效果

render(){
        return (<View style={{flexDirection:'column',
            justifyContent:'space-around',
            alignItems:'flex-end',
            flex:1
        }}>
            <Text style={{backgroundColor: 'powderblue', flex:3}}>column</Text>
            <Text style={{backgroundColor: 'blue',flex:2}}>space-around</Text>
            <Text style={{backgroundColor: 'red',flex:1}}>stretch</Text>
            <Text style={{backgroundColor: 'gray',flex:1}}></Text>
        </View>);
    }

3.CSS样式

a.ReactNative支持CSS中的布局属性，因此可以使用CSS布局属性
b.CSS颜色大全，下面会用到，点击这CSS颜色代码大全

3.1. 视图边框

什么时候使用？想设置自己周边有边框的时候
注意点：一定要设置边框宽度

borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
border<Bottom|Left|Right|Top>Color 各方向边框的颜色,<>表示连着一起，例如borderBottomColor
borderColor 边框颜色

3.2. 尺寸

3.2.1. 设置宽高

width number
height number

3.2.2. 外边距

设置组件与组件之间的间距

注意：第一个组件比较特殊，参照父组件，与父控件之间的间距。
其他组件间距，相对于上一个组件
什么时候使用？想设置自己在父控件的位置的时候使用

margin number 外边距
marginBottom number 下外边距
marginHorizontal number 左右外边距
marginLeft number 左外边距
marginRight number 右外边距
marginTop number 上外边距
marginVertical number 上下外边距

//注意marginRight和width冲突，如果设置了width，marginRight无效。

3.2.3. 内边距

设置子控件与当前控件的位置
什么时候使用？想设置自己的子控件相对自己的位置的时候使用

padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 做内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距

3.2.4. 相对定位和绝对定位

3.2.4.1. 边缘

left   number  左边缘。
right  number  右边缘。
top    number  顶部边缘。
bottom number  底部边缘。

3.2.4.2. 定位(position):

通过 left, top, right 以及 bottom 边缘属性进行定位。

absolute：绝对定位，参照父控件位置定位
relative：相对定位，参照当前控件原始位置定位

什么时候使用绝对定位，当想把一个已经设置了宽度的控件快速的放在左下角，右下角的时候，可以使用绝对定位
什么时候使用相对定位，当想相对自己做出一些改变的时候，采用相对定位,比如相对自己，往下移动一点

参考：

RN中文网

https://reactnative.cn/docs/layout-props/

ReactNaive之CSS和Flex布局

https://www.jianshu.com/p/522e4668aab4

Flexbox布局详解

http://caibaojian.com/flexbox-guide.html

A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/?utm_source=caibaojian.com