时间戳

首页 > 解决方案 > 在 React 或 React Native 中，将颜色设置为 SVG

react-native - 在 React 或 React Native 中，将颜色设置为 SVG

问题描述

你可以为 SVG 设置一个通常采用十六进制颜色的道具吗？在 React Navigation 中，活动背景（选项卡图标/文本后面的选项卡颜色）需要是 SVG，而不是像这样的十六进制颜色：

tabBarOptions: {
    activeTintColor: colors.white,
    activeBackgroundColor: <SVG here>,
    inactiveTintColor: colors.primary.black,
    inactiveBackgroundColor: colors.white,
    labelStyle: {
        fontWeight: "bold",

    },
}

标签： react-nativesvgreact-navigation-stack

解决方案

您可以使用react-native-svg-transformer将 svgs 导入您的代码。设置完成后，您将能够执行以下操作：

import Logo from "./logo.svg";

如果你使用 React Native 0.56 或更早版本，你需要将你的 .svg 文件重命名为 .svgx。

推荐阅读