繼上一篇文章：React Native中 react-navigation 2.0+的使用
先看效果:
image.png
在tabBar中添加一個特殊的控制器。
Tab.js中添加一個占位組件：
image.png
設(shè)置TabNavigatorConfig中的tabBarComponent：
image.png
先在只要關(guān)心TabBar組件就行。志珍。读拆。
1.遍歷路由routes：
image.png
2.創(chuàng)建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
也可以使用系統(tǒng)提供的組件 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>