自定义tabBarComponent(中间站位Item)基于react-navigation 2.0+

继上一篇文章：React Native中 react-navigation 2.0+的使用

先看效果:

image.png

在tabBar中添加一个特殊的控制器。

Tab.js中添加一个占位组件：

image.png

设置TabNavigatorConfig中的tabBarComponent：

image.png

先在只要关心TabBar组件就行。。。
1.遍历路由routes：

image.png

2.创建tabBarItem

renderItem = ()=>{
    const { navigation, jumpTo, activeTintColor, inactiveTintColor } = this.props;
    const focused = (index === navigation.state.index);
    const color = focused ? activeTintColor : inactiveTintColor;
    const TabScene = {
        focused,
        route,
        color,
    };
    
    if (index === 2) {
        return (
            <TouchableOpacity
                key={route.key} 
                activeOpacity={0.9}
                style={styles.tabItem} 
                onPress={() => navigation.navigate('Publish')}
                >
                <View  style={styles.tabItem}>
                    {this.props.renderIcon(TabScene)}
                </View>
            </TouchableOpacity>
        );
    } else {
        return (
            <TouchableOpacity
                key={route.key}
                activeOpacity={0.9}
                style={styles.tabItem} 
                onPress={() => jumpTo(route.key)}
             >
                <View style={styles.tabItem}>

                    {this.props.renderIcon(TabScene)}

                    <Text style={{color, fontSize: 10}}>
                        {this.props.getLabel(TabScene)}
                    </Text>
                </View>
            </TouchableOpacity>
        );
    }
};

image.png

也可以使用系统提供的组件 SafeAreaView来适配 iPhone X，例如：

// key={route.key}必须加，不然会报⚠️
<SafeAreaView key={route.key}>
       <TouchableOpacity
                activeOpacity={0.9}
                onPress={()=>navigation.navigate('Publish')}
        >
            <View style={styles.tabItemStyle}>
                  {renderIcon(TabScene)}
            </View>
      </TouchableOpacity>
 </SafeAreaView>