时间戳

首页 > 解决方案 > BottomTabNavigator 上的涟漪效应

react-native - BottomTabNavigator 上的涟漪效应

问题描述

我正在尝试在 BottomTabNavigator 中添加这样的涟漪效应，但不知道如何？ 在此处输入图像描述

我将createMaterialBottomTabNavigator用于 BottomTabNavigator。

标签： react-native

解决方案

要让 Material Bottom Tab Navigator 更改颜色，您需要使用每个选项卡的tabBarColor属性navigationOptions。您可以在此处的文档中看到这一点。如果您想要波纹效果，还需要在导航器中设置shifting为 true 。config

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

  • react-navigation
  • react-navigation-material-bottom-tabs
  • react-native-paper
  • react-native-vector-icons, 虽然如果使用 Expo 这不是必需的，因为它已经包含在内

有关您需要的依赖项的更多详细信息，请参阅文档

这是一个示例导航器：

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中表现不错。Exporeact-native

推荐阅读