React-navigation tabbar中间较大的图标

时间:2017-04-26 06:35:24

标签: react-native react-navigation react-native-navigation

如果已在其他地方得到解答,请随时指出我正确的方向,但我无法通过此处或谷歌找到它。也许我只是不知道这件事的正确名称?

我目前正在使用React-navigation(反应原生),我想知道是否可以在标签栏的中心制作一个比其他图标更大的图标,特别是当页面滚动时背后的透明度。

在这里嘲笑一个例子: Larger icon in middle overlaying scrollable area of screen

有没有人可以使用这个库,以及如何实现它?

我还想在Wix库实际发布一个没有破坏的版本,错误,实际上带有准确的文档,并且没有被打破当前版本的react-native。 (它现在是一个灾区,但它看起来非常好,所以我很想在它再次实际工作后尝试它),所以它可以用它们的库和我来做只需等待尝试一下?

1 个答案:

答案 0 :(得分:1)

我能够使用以下配置创建类似的样式:

export const Tabs = TabNavigator({
  Profile: {
    screen: ProfileStack,
    navigationOptions: {
      title: 'Profile',
      tabBarLabel: 'Profile',
      tabBarIcon: ({tintColor}) => <Icon name="ios-settings-outline" 
      type="ionicon" size={33} color={tintColor}/>
    }
  },
  Charities: {
    screen: Charities,
    navigationOptions: {
      title: 'Browse',
      tabBarLabel: 'Browse',
      tabBarIcon: ({tintColor}) => 
      <View style={{
          height: 80,
          width: 80,
          borderRadius: 100,
          backgroundColor: '#FE6D64',
          paddingTop: 15}}>
        <Icon name="ios-heart-outline" type="ionicon" size={45} 
         color{tintColor}/>
      </View>
    }
  },
  Account: {
    screen: AccountStack,
    navigationOptions: {
      title: 'Account',
      tabBarLabel: 'Account',
      tabBarIcon: ({tintColor}) => <Icon name="connectdevelop" type="font-
      awesome" size={25} color={tintColor}/>
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: '#84E1BF',
    inactiveTintColor: 'white',
    labelStyle: {
      fontSize: 12
    },
    style: {
      backgroundColor: '#283940'
    },
    showLabel: false
  }
});

“慈善”选项卡延伸到标签栏之外,因为tabBarIcon包装在View组件中,其高度大于标签栏的高度。然后使用borderRadius:100制作圆形。

可能有更好的方法可以做到这一点,但这非常简单。

TabBar Image