rn 订阅发布,多级组件传参

浅浅的花香味﹌ 2021-07-24 22:55 328阅读 0赞

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