其實在上一篇也用到了組件之間的傳值，不過是父組件向子組件傳值，今天我在寫首頁的時候，需要用到子組件向父組件傳值，也就是逆向傳值，順便就在這里總結一下react-native 用react navigation的各種傳值方式。
1.跳轉頁面并傳值
利用navigate進行跳轉，前面的‘xxx’是你要跳轉的頁面，也在你的導航組件的路由里面的頁面名稱，后面就是你要傳遞的參數
//進入詳情頁,傳遞參數
<Button onPress = {this._pushDetail}
title = {this.state.backName}/>
_pushDetail(){
this.props.navigation.navigate('Detail',{
itemId:'123',
otherParas: 'add other params you want',
}
})
}
在詳情頁接收參數：
static navigationOptions = ({navigation,navigationOptions}) => {
return {
title : navigation.getParam('otherParas','suibian'),//后面的這個參數是在前面的參數為null 時填充
}
2.頁面返回，回調參數
我們有時候會出現下級頁面向上級頁面回調傳值的需求，這時候就需要用到react navigation 的回調傳值，
在首頁，也就是一級頁面
//進入詳情頁,傳遞參數
_pushDetail(itemId){
this.props.navigation.navigate('Detail',{
itemId:itemId,
otherParas: 'add other params you want',
callback:(data) => {
this.setState({
backName:data
})
}
})
}
加上callback回調函數就可以了，然后直接貼詳情頁的代碼：
_navGoback (){
const {navigate,goBack,state} = this.props.navigation;
let backParams = this.state.param
state.params.callback(backParams);
this.props.navigation.goBack();
}
其實就是將回調函數作為一個參數，讓詳情頁在this.props屬性中獲取，下面要講到的子組件向父組件傳值其實也是這個道理。
3.父組件給子組件傳值
這個就比較簡單直接貼代碼了，一看也就能理解了
傳值：
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 拿到組件，然后傳值
有一些情況下我們不是在創建子組件的時候就向其傳值，而是等待某個觸發事件，再進行傳遞，這就需要先獲取到這個子組件再向其傳值。
隨便寫個子組件，直接貼代碼：
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>
)
}
}
找到這個組件并傳值：
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.在父組件上定義一個方法接受子組件的傳值
//進入詳情頁,傳遞參數
_pushDetail(itemId){
this.props.navigation.navigate('Detail',{
itemId:itemId,
- 將這個方法傳遞給子組件，并綁定this
<HomeItemComponent _pushDetail = {this._pushDetail.bind(this)}/>
3.子組件能通過this.props拿到這個方法，并調用
_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);
}
這里要說明一點：
<TouchableOpacity onPress = {this._clickItemBlock.bind(this,title)}>
_clickItemBlock(params,event){}
這里的title是作為bind()函數的參數傳過來的。bing(this)的參數傳遞方式，就是通過后面的參數進行傳遞的。
6.通知傳值
如果在組件通信的過程中，是拿不到該組件的，就可以使用通知傳值，下面貼一下通知的代碼：
監聽通知：
componentDidMount(){
//添加監聽者
this.listener = DeviceEventEmitter.addListener('changeTitle',(changeTitle)=>{
this.setState({
originTitle: changeTitle
})
})
}
componentWillUnmount(){
//銷毀監聽者
this.listener.remove()
}
發送通知：
<Text style = {{fontSize : 24}}
onPress = { ()=> {
DeviceEventEmitter.emit('changeTitle','是時候該改變了')
}}>change title</Text>
以上就是我在react native中通信采用的方式，希望對您有所幫助。
demo地址
