如何设计TabNavigator的选项卡?
我有这样一个看起来很丑陋的TabNavigator默认选项卡。我如何添加样式像Instagram?如何设计TabNavigator的选项卡?
我想设置的选项卡导航的背景white
(不是灰色),并设置边框与线之上。另外,我想将活动图标颜色设置为黑色。 (只是像INSTAGRAM ..!)
我不知道我可以把这些样式放在我的TabNavigator。
export default TabNavigator( {
Feed: {
screen: FeedStackNavigator,
},
...
},
{
navigationOptions: ({ navigation }) => ({
header: null,
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case 'Feed':
iconName = Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-list-box';
break;
}
谢谢! :)
回答:
react-navigation有很多不同的properties for stylingTabNavigator
。您可以使用它们来设计您的图标和TabBar
本身。
例
tabBarOptions: { activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
以上是 如何设计TabNavigator的选项卡? 的全部内容, 来源链接: utcz.com/qa/266517.html