react-native 父子组件之间传值

父组件 代码 子组件代码

1.父组件传值给子组件  

父组件给子组件传值 react 和vue都是很相似的 ， 很简单

1.父组件引入子组件 

import Fashbases from './Fashbases'

2.在子组件上直接传值

<Fashbases  child='父元素传递的值' ></Fashbases> 

3.在子组件上通过this.props.child 接收父组件传过来的值  

    <Text>这个也是测试，{this.props.child}</Text>  

2.子组件给父组件传值  

子组件给父组件传值 相当于父组件传递方法给子组件 子组件通过调用父组件的方法 ，把需要传递的值写在形参即可  

1.父组件进入子组件  

import Fashbases from './Fashbases'

2.在父组件中定义方法 

_parentClick = (item)=>{        console.warn('父组件的方法'+'子组件内容'+item);         }

3.在子组件上传递方法  

<Fashbases parentClick={this._parentClick}>       </Fashbases>   

4.在子组件中通过this.props. parentClick('传值' ) 

<TouchableOpacity onPress={()=>{this.props.parentClick('childer')}}></View> 

这样就把子组件想要传递的参数传递给了父组件 ， 

3.在子组件中展示父组件的样式  

子组件中展示的数据 

一般这样写在引用的子组件的样式  是会被子组件忽略的 ，但是 如果在子组件中通过this.props.childer引入就不会被忽略

子组件中展示的数据

4.父组件调用子组件的方法  

在React Native中是有体现的 ， 父组件调用组组件的方法是十分有用的  

父组件调用子组件的方法 通过ref来获取子组件的dom元素  ，  

定义ref 调用子组件方法

在子组件中定义方法即可 ，

子组件的方法

5.父组件在调用子组件的时候还可以书写‘slot’ 不过，react中这只不过是个标志而已  

可以在父组件引用的子组件中书写  slot=‘right’  

solt标志

可以通过this.props.slot 获取right  ， 这样你可以判断自己 的组件放在什么位置  ，最后可以通过flex布局完成自己想要的  ，不同的是vue是封装好的而react 你需要自己模拟这个过程