美文网首页ReactNative
用react-navigation 如何实现 tabBar 上的

用react-navigation 如何实现 tabBar 上的

作者: le_1 | 来源:发表于2017-04-19 09:45 被阅读71次

微信等大部分app的tabBar上面的小图标都是点中的以深色显示,未点中的以浅色显示,这次结合react-native-vector-icons实现了这个目标。

const MainScreenNavigator = TabNavigator({
        Home: {screen: HomeScreen},
        Inform: {screen: InformScreen},
        scoreRate: {screen: scoreRateNavigator},
        Faq: {screen: FaqScreen}
    },
    {
        tabBarOptions: {
            activeTintColor: '#3b5998',
            inactiveTintColor: '#cccccc'
        },
    }); 
 static navigationOptions = {
        tabBar: {
            label: 'Home',
            icon: (obj) => (
                <Icon name="rocket" size={30}  color= {obj.tintColor} />
            )
        }

一开始怎么调都是下图这样,icon颜色不变。

Paste_Image.png
原因是没看到文档这句话
tabBarIcon

React Element or a function that given { focused: boolean, tintColor: string }
returns a React.Element, to display in tab bar
意思是icon 传递的参数有focused 和 tintColor两个属性,加上去就行了。 Paste_Image.png
Paste_Image.png

另:如果用image的话写成

image = obj.focused ? require('./1/png') : require('./2.png');
return <Image style={{height:40, width:40}}
                      source={image} />

相关文章

网友评论

  • 张大娃创业笔记:我用navigation写出来的tabbar的文字和图标中间间隔太大,设置height为45就显示不全文字
    le_1:@孤影追忆 上代码看看
  • 张大娃创业笔记:楼主有没有tabbar的源码,我写怎么写不出来
    le_1:https://reactnavigation.org/docs/navigators/tab
  • Juice_gg:楼主,你好,请问 tabbar 切换的时候,有onPress 类似的触发方法吗?
    le_1:@Juice_gg 导航到另一个页面的时候是可以,但是tabbar切换的时候我找不到触发dispatch的方法。
    Juice_gg:@le_9821 那React Navigation 是不是切换的时候可以通过dispatch 发送actioins?
    le_1:貌似没有 这个问题github上也有人问

本文标题:用react-navigation 如何实现 tabBar 上的

本文链接:https://www.haomeiwen.com/subject/gljczttx.html