RN自定义CustomTabBar及点击事件

根据react-navigation 自定义TabBar

引入react-navigation 直接上代码

const Tab = TabNavigator(
     ...

    {
        tabBarComponent: CustomTabBar,//TabBarBottom, //默认组件
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions: {
            style: { backgroundColor: 'transparent' },
        },
    }

);

自定义的CustomTabBar

import React, {Component} from 'react';
import {
    View, 
    TouchableOpacity, 
    Text, 
    StyleSheet, 
    Image,
    Dimensions,
    ImageBackground
} from 'react-native';

......
const {width} = Dimensions.get('window');

class CustomTabBar extends Component {
    render() {
        let navigation = this.props.navigation;
        let icons = [];
        let titles = [
            '首页',
            '关注',
            '直播',
            '消息',
            '我'
        ];
        const { routes, index } = navigation.state;
        const backgroundColor = (index == 0) ? 'transparent' : IConstants.Custom_TabBarBg;
        return (
           // 下面即可自定义
            
              //  背景图片
                  
                {routes.map((route, idx) => {
                    const color = (index === idx) ? '#fff' : '#999';
                    const isActive = index === idx;
                    return (
                         {
                                if(index === idx && idx != 2){
                                    Toast.show('再次点击选中Tab事件',{position: Toast.positions.CENTER});       
                                    DeviceEventEmitter.emit(IConstants.EventType.HOME_REFRESH,{});                                
                                }else if(idx == 2){
                                    Toast.show('某一个tab点击事件', {position: Toast.positions.CENTER});                                  
                                }
                                else{  
                                  //tab切换事件
                                    navigation.navigate(route.routeName);
                                }
                            }}
                            style={[styles.tab]}
                            key={route.routeName}
                        >
                            {
                                idx === 2
                                ?
                                 
                                :
                                
                                    {titles[idx]}
                                    
                                
                            }
                            {
                                idx == 1 || idx == 3
                                ?
                                
                                :null
                            }
                        
                    )
                })}
            
        );
    }
}

const styles = StyleSheet.create({
    ......
})

 export default CustomTabBar;

监听事件 DeviceEventEmitter (也可以用redux)
1.引入DeviceEventEmitter

import { .....,DeviceEventEmitter} from 'react-native'

2.发事件

 DeviceEventEmitter.emit(IConstants.EventType.HOME_REFRESH,{}); //发监听

3.在需要响应的页面接收监听

//收到监听
        this.homeListener = DeviceEventEmitter.addListener(IConstants.EventType.HOME_REFRESH>,(e)=>{
          ..... //处理事件
       });

//不用了记得移除
       componentWillUnmount(){
            this.homeListener.remove();
       };