Question

我在react-native-svg repo中将此作为一个问题发布，但它更多的是问题而不是问题。我应该从一开始就把它贴在这里。

我需要使用setNativeProps移动和缩放单个<G>（组）元素。我尝试过的任何东西似乎都没有用。

我试过了：

setNativeProps({x: newX, y: newY})

setNativeProps({x: newX.toString(), y: newY.toString()})

setNativeProps({transform: [{translateX: newX}, {translateY: newY}])

例如，如果我直接在<Circle>上使用setNativeProps，一切正常。

G是否实现了setNativeProps？
我应该使用什么语法来设置群组的比例和位置？

Answer 1

VirtualNode (android)和RNSVGNode (ios)实现具有setMatrix方法。通过在网桥上发送transform matrix definition的列主要数组表示来提供新的属性值。如：

setNativeProps({ matrix: [scaleX, skewY, skewX, scaleY, translateX, translateY] })

Answer 2

我认为setNativeProps不会重新渲染G组件的整个子树（阅读here）。

您可以做的是让<G>元素的属性取决于您的组件的状态，如下所示：

<G x={this.state.myXPos} y={this.state.myYPos}/>

Answer 3

我在Mikael Sand的recat-native-svg回购中得到了答案（也许是@msand？）。

https://github.com/react-native-community/react-native-svg/issues/556#issuecomment-354099452

这很有效：

setNativeProps({ matrix: [scaleX, skewY, skewX, scaleY, translateX, translateY] })

对组中的所有对象执行转换，即正是我想要的。

使用react-native-svg可以使用setNativeProps转换<g>？

3 个答案: