转变 与react-native-svg一起使用setNativeProps？

Question

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

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

我试过了：

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的react-native-svg回购中得到了答案（也许是@msand？）。

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

这非常有效：

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

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