时间戳

首页 > 解决方案 > 如何在 react native 中使用 react-native-animated-tabbar 库

react-native - 如何在 react native 中使用 react-native-animated-tabbar 库

问题描述

我正在尝试学习如何使用这个库。 https://github.com/gorhom/react-native-animated-tabbar

在使用部分中，我正在关注独立组件 AnimatedTabBarView，这是我在遵循使用部分之后所做的。示例代码似乎使用了打字稿，在我的应用程序中我没有使用打字稿，所以我修改了 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;

这是我得到的错误代码： 在此处输入图像描述

谢谢你的帮助！

标签： react-native

解决方案

图标组件错误。你可以检查这个例子。

https://github.com/gorhom/react-native-animated-tabbar/blob/master/example/src/screens/bubble/Bubble.tsx

要使用 react-native-vector-icons，请在组件中尝试这样的操作

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

推荐阅读