使用 react-native-reanimated 时出现样式转换属性的类型错误

Question

我正在使用 "react-native"：“0.59.10” "react-native-reanimated": "^1.3.0" 打字稿我收到转换属性的类型错误

const Example = () => {
  const { translationX, gestureHandler } = horizontalPanGestureHandler()
  return (
    <View style={styles.container}>
      <PanGestureHandler {...gestureHandler}>
        <Animated.View style={{ transform: [{ translateX: translationX }] }} />
      </PanGestureHandler>
    </View>
  )
}

这是我遇到的错误

Answer 1

截至目前，您不能直接在 style 属性上传递 transform。这是 react-native-reanimated 的错误。请参考GitHub问题here

解决方案： 但是您可以通过像这样更改代码来解决此问题

const Example = () => {
const { translationX, gestureHandler } = horizontalPanGestureHandler()
const transformStyle = {
     transform: [{ translateX: translationX }]
}
return (
    <View style={styles.container}>
       <PanGestureHandler {...gestureHandler}>
         <Animated.View style={[transformStyle, /** You can add other inline styles here **/{color: 'black'}]} />
      </PanGestureHandler>
    </View>
)}

希望对您有所帮助！

Answer 2

您只需将 react-native-reanimated 更新到最新版本（当前 1.13.0），style 和 transform 的问题就会消失。

使用 react-native-reanimated 时出现样式转换属性的类型错误

getting type error for style transform properties when with react-native-reanimated

typescript

react-native

react-native-reanimated