RN正、反向传值，组件输出

很简单的一个小Demo，绿色的是输出的一个组件，目标把’爱好‘从父组件传给子组件，然后把’name‘从子组件传给父组件

父组件给子组件传值可以使用props，子组件传值给父组件可以使用事件，这里不多说直接上代码，

子组件代码：

//获取屏幕尺寸
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,
        height: 200,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#00ff00'
    }
});
// 把当前的Component输出
module.exports = CustomView;

 父组件的代码只写重点，style自己组织

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>
        )
    }