其實(shí)在上一篇也用到了組件之間的傳值，不過是父組件向子組件傳值招拙，今天我在寫首頁的時(shí)候娇斑，需要用到子組件向父組件傳值颠悬，也就是逆向傳值煌往，順便就在這里總結(jié)一下react-native 用react navigation的各種傳值方式眼俊。
1.跳轉(zhuǎn)頁面并傳值
利用navigate進(jìn)行跳轉(zhuǎn)厢漩，前面的‘xxx’是你要跳轉(zhuǎn)的頁面待错，也在你的導(dǎo)航組件的路由里面的頁面名稱褐澎，后面就是你要傳遞的參數(shù)
//進(jìn)入詳情頁,傳遞參數(shù)
<Button onPress = {this._pushDetail}
title = {this.state.backName}/>
_pushDetail(){
this.props.navigation.navigate('Detail',{
itemId:'123',
otherParas: 'add other params you want',
}
})
}
在詳情頁接收參數(shù)：
static navigationOptions = ({navigation,navigationOptions}) => {
return {
title : navigation.getParam('otherParas','suibian'),//后面的這個(gè)參數(shù)是在前面的參數(shù)為null 時(shí)填充
}
2.頁面返回会钝，回調(diào)參數(shù)
我們有時(shí)候會(huì)出現(xiàn)下級(jí)頁面向上級(jí)頁面回調(diào)傳值的需求，這時(shí)候就需要用到react navigation 的回調(diào)傳值工三，
在首頁迁酸，也就是一級(jí)頁面
//進(jìn)入詳情頁,傳遞參數(shù)
_pushDetail(itemId){
this.props.navigation.navigate('Detail',{
itemId:itemId,
otherParas: 'add other params you want',
callback:(data) => {
this.setState({
backName:data
})
}
})
}
加上callback回調(diào)函數(shù)就可以了，然后直接貼詳情頁的代碼：
_navGoback (){
const {navigate,goBack,state} = this.props.navigation;
let backParams = this.state.param
state.params.callback(backParams);
this.props.navigation.goBack();
}
其實(shí)就是將回調(diào)函數(shù)作為一個(gè)參數(shù)俭正，讓詳情頁在this.props屬性中獲取奸鬓，下面要講到的子組件向父組件傳值其實(shí)也是這個(gè)道理。
3.父組件給子組件傳值
這個(gè)就比較簡單直接貼代碼了段审，一看也就能理解了
傳值：
import ViewPager from './component/viewpage'
const imageUrls = ['https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=760528960,2729756840&fm=26&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558514797592&di=b7404ddc598d9e395f33f36ef883ebf4&imgtype=0&src=http%3A%2F%2Fc4.haibao.cn%2Fimg%2F600_0_100_0%2F1530690356.3493%2F81eaeb56a5255d33fdb280712f3b252d.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558514797592&di=4fc04bc668b9a3ec1e1e75208aeb4b43&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4b90f603738da977a600eedebb51f8198618e31c.jpg'];
<ViewPager imageUrls ={imageUrls}/>
接收：
const imageUrls = this.props.imageUrls;
4通過ref 拿到組件全蝶，然后傳值
有一些情況下我們不是在創(chuàng)建子組件的時(shí)候就向其傳值，而是等待某個(gè)觸發(fā)事件寺枉，再進(jìn)行傳遞抑淫，這就需要先獲取到這個(gè)子組件再向其傳值。
隨便寫個(gè)子組件姥闪，直接貼代碼：
class HeaderImage extends React.Component{
constructor(props){
super(props);
this.state = {
imageUrl: null
}
}
_refreshImage(imagesource){
this.setState({
imageUrl: imagesource
})
}
render(){
return(
<View style = {{width:screenW,height : 120}}>
<Image style = {{flex: 1,backgroundColor: 'red' }}
source = {{uri: this.state.imageUrl}}
/>
</View>
)
}
}
找到這個(gè)組件并傳值：
import ImageComponent from './component/HeaderImage'
const imageurl = 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=760528960,2729756840&fm=26&gp=0.jpg'
<ImageComponent ref= 'imageShow' style = {{height: 100}}/>
<Button
title = 'show image'
onPress = {this._showImageNow}/>
_showImageNow(){
this.refs.imageShow._refreshImage(imageurl)
}
完成
5.子組件向父組件傳值
1.在父組件上定義一個(gè)方法接受子組件的傳值
//進(jìn)入詳情頁,傳遞參數(shù)
_pushDetail(itemId){
this.props.navigation.navigate('Detail',{
itemId:itemId,
- 將這個(gè)方法傳遞給子組件始苇，并綁定this
<HomeItemComponent _pushDetail = {this._pushDetail.bind(this)}/>
3.子組件能通過this.props拿到這個(gè)方法，并調(diào)用
_renderItem(path,title){
// console.warn(path)
// console.warn(title)
return(
<TouchableOpacity onPress = {this._clickItemBlock.bind(this,title)}>
<View style = {{flexDirection:'column',margin:10,justifyContent:'center',alignItems:'center'}}>
<Image
source = {path}
style = {{width: 45,height:45}}
/>
<Text style = {{fontSize: 15,color:'#333',textAlign:'center'}}>{title}</Text>
</View>
</TouchableOpacity>
)
}
_clickItemBlock(params,event){
Alert.alert(params)
// Alert.alert(event)
this.props._pushDetail(params);
}
這里要說明一點(diǎn)：
<TouchableOpacity onPress = {this._clickItemBlock.bind(this,title)}>
_clickItemBlock(params,event){}
這里的title是作為bind()函數(shù)的參數(shù)傳過來的筐喳。bing(this)的參數(shù)傳遞方式催式，就是通過后面的參數(shù)進(jìn)行傳遞的。
6.通知傳值
如果在組件通信的過程中避归，是拿不到該組件的荣月，就可以使用通知傳值，下面貼一下通知的代碼：
監(jiān)聽通知：
componentDidMount(){
//添加監(jiān)聽者
this.listener = DeviceEventEmitter.addListener('changeTitle',(changeTitle)=>{
this.setState({
originTitle: changeTitle
})
})
}
componentWillUnmount(){
//銷毀監(jiān)聽者
this.listener.remove()
}
發(fā)送通知：
<Text style = {{fontSize : 24}}
onPress = { ()=> {
DeviceEventEmitter.emit('changeTitle','是時(shí)候該改變了')
}}>change title</Text>
以上就是我在react native中通信采用的方式梳毙，希望對(duì)您有所幫助哺窄。
demo地址
