import LinearAnimatedGradientTransition from ‘react-native-linear-animated-gradient-transition’;
这个组件

import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { View, Text, StyleSheet } from 'react-native';
import { MaterialTopTabBarProps, MaterialTopTabBar } from '@react-navigation/material-top-tabs';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
import LinearAnimatedGradientTransition from 'react-native-linear-animated-gradient-transition';

import Touchable from '@/components/Touchable';
import { RootState } from '@/models/index';

const mapStateToProps = ({home}: RootState) => {
  return {
    linerColors: home.carousels? home.carousels[home.activeCarouselIndex]?.colors : undefined
  }
}

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;
type IProps = MaterialTopTabBarProps & ModelState;

class TopTabBarWrapper extends React.Component<IProps> {

  get linerGradient() {
    const { linerColors = ['#ccc', '#e2e2e2'] } = this.props;
    return (
      <LinearAnimatedGradientTransition colors={linerColors} style={styles.gradient}/>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this.linerGradient}
        <View style={styles.topTabBarView}>
          <MaterialTopTabBar style={styles.tabbar} {...this.props}/>
          <Touchable style={styles.categoryBtn}>
            <Text>分类</Text>
          </Touchable>
        </View>
        <View style={styles.bottom}>
          <Touchable style={styles.searchBtn}>
            <Text>搜索按钮</Text>
          </Touchable>
          <Touchable style={styles.historyBtn}>
            <Text>历史记录</Text>
          </Touchable>
        </View>
      </View>
    )
  }
}

export default  connector(TopTabBarWrapper);

const styles = StyleSheet.create({
  container: {
    paddingTop: getStatusBarHeight(),
    backgroundColor: '#fff'
  },
  tabbar: {
    // backgroundColor: 'red',
    flex: 1,
    elevation: 0, // 投影
    overflow: 'hidden',
    backgroundColor: 'transparent'
  },
  topTabBarView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  categoryBtn: {
    paddingHorizontal: 10,
    borderLeftWidth: StyleSheet.hairlineWidth,
    borderLeftColor: '#ccc'
  },
  bottom: {
    flexDirection: 'row',
    paddingVertical: 7,
    paddingHorizontal: 10,
    alignItems: 'center'
  },
  searchBtn: {
    flex: 1,
    paddingLeft: 12,
    height: 30,
    justifyContent: 'center',
    borderRadius: 15,
    backgroundColor: 'rgba(0, 0, 0, 0.1)'
  },
  historyBtn: {
    paddingLeft: 24
  },
  gradient: {
    ...StyleSheet.absoluteFillObject,
    height: 260
  }
})