首页 > 解决方案 > React Navigation Material Top Tab Navigator Tabbar背景需要随组件过渡背景颜色

问题描述

底线问题:

任何人都可以建议如何在左右滑动时转换标签栏的背景颜色以匹配屏幕背景颜色?

我正在为三个选项卡使用 topMaterialTabNavigator。我创建了一个自定义标签栏。这三个标签有不同的颜色。我希望标签栏的背景颜色与过渡中屏幕的背景颜色相匹配。但是,我还没有找到一种方法来做到这一点。

如果我更改索引上的背景颜色,它看起来像这样:

在此处输入图像描述

刷卡器

如果我尝试使用gestureHandlerProps:

  <NavigationContainer>
    <Main.Navigator
      gestureHandlerProps={{
        maxPointers: 1,
        onGestureEvent: e => {
          console.log('onGestureEvent e', e);
          return (this.translationX = e.nativeEvent.translationX);
        },
      }}
      tabBar={props => (
        <HomeTabs props={props} eventItem={this.translationX} />
      )}
      ......
       </NavigationContainer>

我得到这样的颜色滞后:

在此处输入图像描述 任何人都可以建议如何在左右滑动时转换标签栏的背景颜色以匹配屏幕背景颜色?

提前喝彩。

软件版本 iOS 或 Android
@react-navigation/native 5.0.1
@react-navigation/material-top-tabs 5.0.2
react-native-tab-view 2.13.0
react-native 0.61.5 node 12.14.1
yarn 1.21。 1

标签: react-nativereact-navigation-v5react-navigation-bottom-tab

解决方案


推荐阅读