React native 如何在react native中使用react native动画选项卡栏库

我正在努力学习如何使用这个图书馆

在使用部分，我将关注独立组件animatedtabarview，下面是我在使用部分之后所做的。示例代码似乎使用了typescript，在我的应用程序中我没有使用typescript，所以我修改了const tabs行，这可能会导致问题。我的主要目的只是尝试在屏幕上显示选项卡栏

import React, { useEffect, useState } from "react";
import { StyleSheet, View, ScrollView, Text } from "react-native";
import AnimatedTabBar, {
  TabsConfig,
  AnimatedTabBarView,
  BubbleTabBarItemConfig,
} from "@gorhom/animated-tabbar";

import { AntDesign } from "@expo/vector-icons";

const tabs = {
  Home: {
    labelStyle: {
      color: "#5B37B7",
    },
    icon: {
      component: AntDesign,
      activeColor: "rgba(91,55,183,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: {
      activeColor: "rgba(223,215,243,1)",
      inactiveColor: "rgba(223,215,243,0)",
    },
  },
  Profile: {
    labelStyle: {
      color: "#1194AA",
    },
    icon: {
      component: AntDesign,
      activeColor: "rgba(17,148,170,1)",
      inactiveColor: "rgba(0,0,0,1)",
    },
    background: {
      activeColor: "rgba(207,235,239,1)",
      inactiveColor: "rgba(207,235,239,0)",
    },
  },
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#999",
  },
  tabBarContainer: {
    borderRadius: 25,
  },
});
const test = () => {
  const [index, setIndex] = useState(0);
  return (
    <View style={styles.container}>
      <Text>{index}</Text>
      <AnimatedTabBarView
        tabs={tabs}
        itemOuterSpace={{
          horizontal: 6,
          vertical: 12,
        }}
        itemInnerSpace={12}
        iconSize={20}
        style={styles.tabBarContainer}
        index={index}
        onIndexChange={setIndex}
      />
    </View>
  );
};

export default test;

import React，{useffect，useState}来自“React”；
从“react native”导入{样式表、视图、滚动视图、文本}；
导入动画阿巴尔{
TabsConfig，
动画AbbarView，
BubbletAbaritemConfig，
}来自“@gorhom/animated tabbar”；
从“@expo/vector icons”导入{AntDesign}”；
常量选项卡={
主页：{
标签样式：{
颜色：“5B37B7”，
},
图标：{
组成部分：设计，
activeColor:“rgba（91,55183,1）”，
不活动颜色：“rgba（0,0,0,1）”，
},
背景：{
activeColor:“rgba（223215243,1）”，
不活动颜色：“rgba（223215243,0）”，
},
},
简介：{
标签样式：{
颜色：“1194AA”，
},
图标：{
组成部分：设计，
activeColor:“rgba（17148170,1）”，
不活动颜色：“rgba（0,0,0,1）”，
},
背景：{
activeColor:“rgba（207235239,1）”，
不活动颜色：“rgba（207235239,0）”，
},
},
};
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：“999”，
},
tabBarContainer：{
边界半径：25，
},
});
常数测试=（）=>{
const[index，setIndex]=useState（0）；
返回(
{index}

感谢您的帮助！
图标组件错误。您可以检查此示例


要使用react原生向量图标，请在组件中尝试类似的操作

icon: {
      component: () => <FeatherIcon name="user" size={20} />,
      activeColor: 'rgba(91,55,183,1)',
      inactiveColor: 'rgba(0,0,0,1)',
    }

图标：{
组件：（）=>，
activeColor:'rgba（91,55183,1）'，
不活动颜色：“rgba（0,0,0,1）”，
}