如何移除React Native中<Tab.Navigator>的波纹效果？

要移除<Tab.Screen>点击时的波纹效果，你需要在screenOptions的tabBarItemStyle中设置对应属性，以下是针对不同Tab导航器类型的解决方案：

针对@react-navigation/bottom-tabs（默认底部导航） #

Android平台的波纹反馈由pressColor控制，将其设为透明即可移除波纹，修改后的代码如下：

<Tab.Navigator
    screenOptions={{
        headerShown: false,
        tabBarStyle: styles.tabBar,
        tabBarShowLabel: false,
        // 移除点击波纹
        tabBarItemStyle: { pressColor: 'transparent' }
    }}
>
    {/* 你的Tab.Screen组件 */}
</Tab.Navigator>

针对@react-navigation/material-bottom-tabs（Material风格底部导航） #

这类导航器的波纹由rippleColor控制，同样设为透明即可：

<Tab.Navigator
    screenOptions={{
        headerShown: false,
        tabBarStyle: styles.tabBar,
        tabBarShowLabel: false,
        // 移除Material风格的波纹
        tabBarItemStyle: { rippleColor: 'transparent' }
    }}
>
    {/* 你的Tab.Screen组件 */}
</Tab.Navigator>

你之前尝试的属性要么拼写错误（比如ColorPress应为pressColor），要么不属于控制Tab点击反馈的正确属性，上述配置无需自定义组件即可直接移除波纹效果。

内容的提问来源于stack exchange，提问作者Lucas Castillo