/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

// 1.加载组件: React为默认组件 , {}包裹的是非默认组件;
import React , {
    Component
} from 'react'

// 2.加载常用组件:全部都为非默认组件;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native'

// 子组件:
class Son extends Component
{
    constructor(props) {
      super(props);
      this.state = {
          money:this.props.money,
      };
    }

    render() {
        return (
            <View style={styles.sonStyle}>
                <Text>子组件</Text>
                <Text>{this.props.name}的儿子</Text>
                {/* 这里就不能再用 this.props.money 了 , 应该用 this.state.money 状态机变量才行! */}
                <Text>收到 + {this.state.money} + 零花钱</Text>
            </View>
        )
    }
}

// 父组件:
class Father extends Component {

    sendMoney() {
        var son = this.refs.son;
        var money = son.state.money;
        console.log(son);
        money += 100;
        son.setState({
            money:money,
        });
    }

    render() {
        return (
            <View style={styles.fatherStyle}>
                <Text>父组件</Text>
                <Text onPress={this.sendMoney.bind(this)}>点击文字给零花钱</Text>
                <Son name = '苗冬' ref='son' money = {this.props.money}></Son>

            </View>
        )
    }
}


// 3.自定义程序入口组件:
export default  class App extends Component
{
    render() {
        return (
            <View style={styles.rootStyle}>
                <Text>容器视图</Text>
                <Father money = {100}></Father>
            </View>
        );
    }
}


// 4.样式表 , StyleSheet:
const styles = StyleSheet.create({
    rootStyle:{
        backgroundColor:'#F5FCFF',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        marginTop:20,
    },
    fatherStyle:{
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center',
        width:200,
        height:400,
    },
    sonStyle:{
        backgroundColor:'green',
        justifyContent:'center',
        alignItems:'center',
        width:200,
        height:200,
    },


});

// 5.注册程序的入口组件:在index.js文件里写.
AppRegistry.registerComponent('ReactDemo' , () => App);



// 包装对象的时候用大括号 , 包装组件标签的时候用小括号;
/**
 *  flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。
 *  flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。
 *  center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
 *  space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。
 *  space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半
 *
 * */

/**
 *  alignItems:决定子组件在测轴中具体布局
 *  flex-start 子组件向侧轴起点对齐。
 *  flex-end 子组件向侧轴终点对齐。
 *  center 子组件在侧轴居中。
 *  stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
 *
 * */

愿编程让这个世界更美好