对BottomTabNavigator的波纹效果

Question

我试图在BottomTabNavigator中添加这样的涟漪效果，但不知道如何？

我正在将createMaterialBottomTabNavigator用于BottomTabNavigator。

Answer 1

要使“材料底部标签”导航器更改颜色，您需要为每个标签使用tabBarColor的{​​{1}}属性。您可以在文档here中看到此内容。如果需要波纹效果，还需要在导航器的navigationOptions中将shifting设置为true。

您需要确保已安装以下依赖项：

• config
• react-navigation
• react-navigation-material-bottom-tabs
• react-native-paper，但是如果使用Expo则不需要，因为已经包含

有关所需依赖项的更多详细信息，请参见documentation

以下是示例导航器：

react-native-vector-icons

我本可以创建一个小吃来显示其工作原理，但是不幸的是，import * as React from 'react'; import Screen1 from './Screen1'; import Screen2 from './Screen2'; import { createAppContainer } from 'react-navigation'; import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'; // <- notice where we import createMaterialBottomTabNavigator from import { MaterialIcons } from '@expo/vector-icons'; const tabBarIcon = name => ({ tintColor }) => ( <MaterialIcons style={{ backgroundColor: 'transparent' }} name={name} color={tintColor} size={24} /> ); const screens = { Screen1: { screen: Screen1, navigationOptions: { tabBarIcon: tabBarIcon('photo-album'), tabBarColor: 'blue' // <- set this to the color you want } }, Screen2: { screen: Screen2, navigationOptions: { tabBarIcon: tabBarIcon('favorite'), tabBarColor: 'green' // <- set this to the color you want } } }; const config = { headerMode: 'none', initialRouteName: 'Screen1', shifting: true, // <- notice this has been set to true activeColor: 'white', inactiveColor: 'black' }; const MainNavigator = createMaterialBottomTabNavigator(screens, config); export default createAppContainer(MainNavigator); 在小吃中的表现不佳，但是在本地react-navigation-material-bottom-tabs或Expo应用中却表现得很好。