TabBarBottom 上的波纹效果

Question

如何在 TabBarBottom 中单击选项卡时添加波纹动画。我想要像 Youtube 应用一样的涟漪效果

Answer 1

您可以使用Screen's Navigation Options 添加所需样式的tabBarIcon

tabBarIcon

给定 { focused: boolean, tintColor: string } 的 React 元素或函数返回 React.Element，以显示在标签栏中

tabBarLabel

标签栏或 React Element 中显示的标签的标题字符串或 给定{ focused: boolean, tintColor: string } 的函数返回 React.Element，显示在标签栏中。未定义时，场景标题 用来。要隐藏，参见前面的tabBarOptions.showLabel 部分。

tabBarOnPress

回调处理点击事件；参数是被点击的scene: { route, index } 和可以执行的jumpToIndex 方法 为您导航。

示例

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
    navigationOptions: ({navigation}) => ({
      tabBarIcon: ({focuced, tintColor}) => (
        <MyCustomIcon focuced={focuced} tintColor={tintColor} name="Home" />
      )
    })
  },
  Notifications: {
    screen: MyNotificationsScreen,
    navigationOptions: ({navigation}) => ({
      tabBarIcon: ({focuced, tintColor}) => (
        <MyCustomIcon focuced={focuced} tintColor={tintColor} name="Notifications" />
      )
    })
  },
});