标签: react-native-svg

我对<Rect />元素进行了简单的动画插值,但我看到我的ui没有变化,好像宽度保持为0.

我手动将我的结束值添加到组件中width={149.12}并正确显示它,因此我现在有点困惑为什么它没有从动画中获取相同的值？

react-native@0.57.1

react-native-svg@7.03

针对iOS 12

这里是完整的实现,本质上是一个法术力和健康条,它接收当前值和总值,即50和100应显示rect的半宽.(示例使用typescript,但如果需要,答案可以是普通的js)

import * as React from 'react'
import { Animated } from 'react-native'
import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { deviceWidth } from '../services/Device'

const barWidth = deviceWidth * 0.3454
const barHeight = barWidth * 0.093
const AnimatedRect = Animated.createAnimatedComponent(Rect)

/**
 * Types
 */
export interface IProps {
  variant: 'MANA' | 'HEALTH'
  currentValue: number
  totalValue: number
}

export interface IState {
  width: Animated.Value
} …

我正在尝试在我的 React Native 项目中使用 SVG。这是我的组件的代码：

<Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}>

  <Defs>

     <ClipPath id="a">
        <Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
    </ClipPath>

    <LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox">
        <Stop offset="0" stopColor="rgb(76,209,149)"  />
        <Stop offset="1" stopColor="rgb(170,221,100)"  />
    </LinearGradient>

  </Defs>

    <G class="b" transform="translate(0 -160)">
        <Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)"  fill='url(#b)' />
    </G>

</Svg>

我得到的输出是：

https://i.stack.imgur.com/mGaBg.png

将 expo 35 升级到 36 后出现此错误。

Unable to resolve "../../data" from "node_modules/css-tree/lib/syntax/default.js"

我试过了yarn add css-tree。这个错误消失了，但是模块react-native-svg开始给出与它包含的css-tree模块相同的错误。

我尝试升级expo-cli到最新版本并重新启动终端。我正在运行构建expo start -c以确保缓存不会影响它。我试图从模拟器中删除应用程序。还是一样。

我已经能够通过升级css-tree内部的依赖来应用临时修复react-native-svg，但据我所知，这是一种非常错误的方法。

有任何想法吗？

我试图将显示不同数据的多个折线图放在一张图中，但无法使用 react-native-svg-charts 在 react-native 中这样做。

<View style= {{height: 200}}>
      <LineChart 
        style={{ flex:1 }}
                data={this.state.data}
                svg={{ stroke: 'rgb(134, 65, 244)' }}
                contentInset={{ top: 20, bottom: 20 }}
            >
            <Grid/>
      </LineChart>
      <LineChart 
        style={{position: 'absolute'}}
                data={this.state.data1}
                svg={{ stroke: 'rgb(168, 155, 50)' }}
                contentInset={{ top: 20, bottom: 20 }}
            >
            <Grid/>
      </LineChart>
      </View>

上面的代码是我正在尝试的，但由于我只得到第一个数据的折线图，因此无法获得正确的设计。

谢谢！

我想从 illustrator 生成的 SVG 文件中渲染图像，我使用的是react-native 0.59、react-native-svg和react-native-svg-uri，这是我的jsx：

  <View style={styles.aboutSection}>
              <SvgUri
                width="150"
                height="150"
                source={require('../../assets/images/logo_blue.svg')}
              />
    </View>

和我的 SVG 文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-574 823.3 20 14" style="enable-background:new -574 823.3 20 14;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#2A327B;}
</style>
<g>
    <g transform="translate(-320.000000, -1983.000000)">
        <g transform="translate(40.000000, 1680.000000)">
            <path class="st0" d="M-284,1140.3c-7.4,0-10-7-10-7s3.4-7,10-7c6.7,0,10,7,10,7S-277.3,1140.3-284,1140.3L-284,1140.3z
                 M-284,1129.3c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4S-281.8,1129.3-284,1129.3L-284,1129.3z M-284,1135.3c-1.1,0-2-0.9-2-2
                s0.9-2,2-2s2,0.9,2,2S-282.9,1135.3-284,1135.3L-284,1135.3z"/>
        </g>
    </g>
</g>
</svg>

并且在调试时没有显示我缺少的内容以及是否有更好的方法来显示 SVG …

我目前正在创建一个 React Native 应用程序，但仍然不确定如何最好地处理我的用例的状态。

我用来react-native-svg在应用程序中创建一个相当复杂的图形，它存储在一个组件中，保持不变并在父组件中检索。然后这个父组件在画布上有规律地旋转和平移，但复杂图形的路径不会改变。因此，由于计算量相当大，我只想在应用程序开始时计算该图形的 SVG 路径，而不是在我旋转或平移父组件时计算。目前，我的代码结构如下所示：

图形组件

const Figure = (props) => {
    const [path, setPath] = useState({FUNCTION TO CALCULATE THE SVG PATH});

    return(
        <G>
            <Path d={path} />
        </G>
    )
}

父组件

const Parent = (props) => {
    return (
        <View>
            <Svg>
                <G transform={ROTATE AND TRANSFORM BASED ON INTERACTION}>
                    <Figure />
                </G>
            </Svg>
        </View>
    )
}

如您所见，我使用了路径数据的状态。我现在的问题：

1. 我是否在这里确保此路径仅在开始时计算一次？
2. 有没有更优雅/更好的方法来做到这一点（例如，我现在根本不使用 setter 函数，所以我觉得这不是最佳做法）

编辑：

计算路径的函数取决于我从父组件传递的一些道具。

我正在尝试将 SVG 路径的长度从 0 动画化为 React Native Reanimated 2 中的完整长度。这是我的示例路径：

const AnimatedPath = Animated.createAnimatedComponent(Path);

const animatedProps = useAnimatedProps(() => {
  const path =
    `M${width * 0.182} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.39} `;
  return {
    d: path,
  };
});

return (
  <Svg height="100%" width="100%">
    <AnimatedPath animatedProps={animatedProps} fill="none" stroke="red" strokeWidth="5" />
  </Svg>
);

我尝试在路径的宽度上添加一些插值，但没有成功。我还尝试查看 Redash 的 interpolatePath() 实现，但它似乎采用两个路径作为输出范围。还有什么我应该看的吗？

我目前正在尝试使用 React Native SVG 在我的 RN 应用程序中渲染 SVG 组件。但是，metro.config.js 配置会导致一些我似乎无法解决的错误。

我已经安装了react-native-svg和react-native-svg-transformer并组合了metro配置文件，如下所示：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

但是，我总是收到以下错误：

[Sun Feb 13 2022 17:49:52.470]  ERROR    ReferenceError: Can't find variable: config …

我有一个FlatList接收最大值的（不可变）数据。50 个元素，它使用react-native-svg.

部分图形由Pressable用于选择元素的组件包裹。

现在的问题是，我无法选择任何元素，直到遍历FlatList完所有 50 个项目。

我不明白的是，屏幕外的项目甚至没有渲染，它只是容器。全部渲染完毕后，我可以单击元素，显示波纹效果并触发事件。

眼镜：

• 世博会 @ 46.0.0
• 反应本机@0.69.6
• 反应@18.0.0
• 通过 android 运行expo start --no-dev --minify然后在 Expo Go 中打开

再生产：

import React, { useEffect, useState } from 'react'
import { FlatList } from 'react-native'
import { Foo } from '/path/to/Foo'
import { Bar } from '/path/to/Bar'

export const Overview = props => {
  const [data, setData] = useState(null)
  
  // 1. fetching data

  useEffect(() => {
    // load …

在我的应用程序中，我有以下代码：

    <Svg width={W} height={H} viewBox={viewBox} style={style} preserveAspectRatio="none">
      <Defs>
        <Mask id="mask" x={0} y={0} width={W} height={H} maskUnits="userSpaceOnUse" maskContentUnits='userSpaceOnUse'>
          <Nested name="Path" animated d={path} stroke="white" strokeLinejoin="round" strokeWidth={10} strokeDasharray="5 60" strokeDashoffset={pathOffset}/>
        </Mask>
      </Defs>

      <G mask="url(#mask)">
        <Nested name="Path" d={path} stroke="orange" strokeLinejoin="round"/>
        {fields.map( f => <Nested key={f.id} {...f}/>)}
      </G>

    </Svg>

其中是、和其他 RN-SVG 元素Nested的委托。PathCircle

现在，如果G@mask删除了，Android 模拟器或真实设备上的元素将如下所示：

它的G@mask显示精度降低/像素化/模糊：

我准备了一份小吃 -> https://snack.expo.dev/@injecteer/react-native-svg-mask，在网络模式下，带有动画的蒙版看起来很好（底线）：

如何完全精确地显示屏蔽元素？我缺少什么？