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

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

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/108326200
RN