Android混合开发之 ReactNative3--重要概念，Flex布局和RN组件之间的通信

重要概念：

组件：万物皆组件，界面按钮Text等都是组件，组件都有状态。
props:初始属性，为了传递数据，不可改变。（可以通过父组件去影响当前的props,即父组件向子组件传递数据）
state: 数据状态集合，可改变。 this.setState 改变状态, 从而影响和刷新当前UI。

Flex布局：

Flex布局：弹性盒子布局。

image.png

image.png

    Flex主要属性：
    主轴交叉轴：主轴就是排列轴，交叉轴是垂直于主轴的，用于辅助子项目的排列
    
    flexDirection: column(默认） 指定主轴垂直，子项目从上往下
                    column-reverse 垂直，从下往上
                    row 水平，从左往右
                    row-reverse 水平，从右往左

    flex: 指定数字，按照比例根据父容器大小来动态计算大小，其中父容器必须有固定的width 和height，或者设定flex，要不父容器尺寸为0，子组件设置flex也没有效果（这是废话）

数值越大，显示空间越大

    justifyContent:flex-start(默认）集中在最上方
                   center 整理竖向居中
                   flex-end 集中在最下方
                   space-around 均匀分布 
                   space-between 均匀铺满

    alignContent:多条次轴线的对齐方式（如果只有一个，该属性不起作用，即不换行／列，该属性无用）
其属性值:
      flex-start起始位置对齐（多条次轴线左对齐）
      flex-end结束位置对齐（多条次轴线右对齐）
      center与交叉轴两端对齐，轴线之间的间距间隔平均分布
      space-between每根轴线两侧的间隔相等
      space-around轴线占满整个交叉轴，默认值

  alignItem:

Flex盒子布局的更多属性，可以参考https://reactnative.cn/docs/0.43/layout-with-flexbox.html

组件之间的通信：

只限于父组件和子组件，如果是同级之间，需要用到转发，这里暂且不介绍。

1.父组件给子组件传递

import React,{Component} from 'react'; //Component是react中的内部类
import {Text,View} from "react-native";

export default class Parent extends Component{
    // 构造方法   一般用来做状态state的申请
    constructor(props){
        super(props);
        this.state = {name:'哈哈',age:10}
    }
    // 渲染方法
    render() {
        return 
            
        ;
    }
}


class Son extends Component{
    // 渲染方法
    render() {
        return 
            {this.props.name}
        ;
    }
}

2.子组件给父组件传值: 在父组件中定义方法，然后将方法名传递给子组件，子组件就可以从props中调用父组件的方法了。

import React,{Component,PureComponent} from 'react'
import {Text,TouchableOpacity,View} from 'react-native'
class Parent extends Component{
    // 构造方法   一般用来做状态state的申请
    constructor(props){
        super(props);
        this.state = {name:'哈哈',age:10};
    }
    
    // 父组件定义的方法
    onClickSon = (msgFromSon) => {
        this.setState({name:msgFromSon});
    }
    
    // 渲染方法
    render() {
        return 
    
        ;
    }
}


class Son extends Component{
    // 渲染方法
    render() {
        return 
            
                    this.props.onClickSon('I am your son')}>
                    {this.props.name}
            
        ;
    }
}