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

Question

我正在使用 "react-native": "0.59.10" "react-native-reanimated": "^1.3.0" 和 typescript 我收到转换属性的类型错误

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

这是我得到的错误

Answer 1

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

Answer 2

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

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

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>
)}

希望这可以帮助！