1、订阅消息
this.state.subscribe=DeviceEventEmitter.addListener('xx',(data)=>{
...
})
2、在组件卸载时取消订阅
componentWillMount()
{
this.state.subscribe.remove();
}
3、发布消息
DeviceEventEmitter.emit('xx',内容);
代码示例:
订阅:
import React,{Component} from 'react'
import {
View,
Text,
StyleSheet,
Image,
DeviceEventEmitter
} from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
import Home from '../home'
import HourList from '../hourlist'
import Ht from '../ht'
class App extends Component{
state={
selectedTab:'home',
subscribe:''
}
componentDidMount()
{
this.state.subscribe=DeviceEventEmitter.addListener('name',(data)=>{
console.warn(data);
})
}
componentWillMount()
{
console.log('aa');
this.state.subscribe.remove();
}
render()
{
return(
<TabNavigator
tabBarStyle={{backgroundColor:'white',height:70,color:'red'}}
>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="首页"
titleStyle={{marginTop:10}}
selectedTitleStyle={{color:'green'}}
renderIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
renderSelectedIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
onPress={() => this.setState({ selectedTab: 'home' })}>
<Home navigation={this.props.navigation}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="海淘"
titleStyle={{marginTop:10}}
selectedTitleStyle={{color:'green'}}
renderIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
renderSelectedIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
<HourList navigation={this.props.navigation}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'one'}
titleStyle={{marginTop:10}}
title="一小时"
selectedTitleStyle={{color:'green'}}
renderIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1131066910,3787902825&fm=26&gp=0.jpg'}} />}
renderSelectedIcon={() => <Image style={{height:40,width:60}} source={{uri:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2604709958,3677471493&fm=26&gp=0.jpg'}} />}
onPress={() => this.setState({ selectedTab: 'one' })}>
<Ht navigation={this.props.navigation}/>
</TabNavigator.Item>
</TabNavigator>
)
}
}
const styles = StyleSheet.create({
})
export default App
发布:
import React,{Component} from 'react'
import {
View,
Text,
StyleSheet,
Button,
TouchableOpacity,
Image,
FlatList,
DeviceEventEmitter
} from 'react-native'
import TabBar from '../../components/common/Topbar'
import Item from '../../components/common/goodsItem'
class Half extends Component{
state={
arr:[1,2,3,4,5,6]
}
componentDidMount()
{
DeviceEventEmitter.emit('name','wakkk');
}
render()
{
return(
<View>
<TabBar
middleItem={()=>{return <Text>半小时热门</Text>}}
rightItem={()=>{return <TouchableOpacity
onPress={()=>this.props.navigation.goBack()}
>
<Text style={{color:'green',paddingRight:10}}>关闭</Text>
</TouchableOpacity>}}
/>
<Text style={{width:'100%',height:40,textAlign:'center',borderWidth:2,borderColor:'#eee',lineHeight:40}}>收集半小时内热门内容</Text>
<FlatList
data={this.state.arr}
renderItem={()=>{
return <Item />
}}
keyExtractor={(item,index)=> index}
style={{marginBottom:70}}
ItemSeparatorComponent={()=>{
return <View style={{width:'100%',height:2,backgroundColor:'#ccc'}}></View>
}}
/>
</View>
)
}
}
const styles = StyleSheet.create({
})
export default Half