对TabBarBottom的连锁反应

Question

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

Answer 1

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

  

tabBarIcon

     

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

     

<强> tabBarLabel

     

标签栏或React Element或a中显示的标签的标题字符串   给定{ 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" />
      )
    })
  },
});