//获取屏幕尺寸

var Dimensions = require('Dimensions');

var {width, height} = Dimensions.get("window");

export default class CustomView extends Component {

    static defaultProps = {

        age: 18,

        love: '',

        name:'',

        onclick:null

    }

    constructor(props) {

        super(props);

        this.state = {

            //state创建

            name: '张三'

        }

    }

    _click(name){

        // 反向传值

        this.props.onclick(name);

    }

    render() {

        return (

            <View style={styles.wrapper}>

                {/*修改state*/}

                <TouchableOpacity onPress={()=>{this.setState({"name": "李四"})}}>

                    <Text>{this.state.name},你好,年龄{this.props.age},爱好{this.props.love}</Text>

                </TouchableOpacity>

                {/*点击事件*/}

                <TouchableOpacity onPress={()=>this._click(this.state.name)} style={{marginTop: 20}}>

                    <Text>点击我把name输出出去</Text>

                </TouchableOpacity>

            </View>

        )

    }

}

const styles = StyleSheet.create({

    wrapper: {

        width: width,

        height: 200,

        alignItems: 'center',

        justifyContent: 'center',

        backgroundColor: '#00ff00'

    }

});

// 把当前的Component输出

module.exports = CustomView;

customViewClick(name) {

        alert(name)

    }

    render() {

        return (

            <View style={styles.wrapper}>

                <TouchableOpacity onPress={()=>this.click()}>

                    <View style={styles.textStyle}>

                        <Text>1243</Text>

                    </View>

                </TouchableOpacity>

                <CustomView

                    //正向props传值

                    love="跑步、画画"

                    //反向传值

                    onclick={(name) => this.customViewClick(name)}

                />

            </View>

        )

    }