如何修复 React Native 中的“transform with key of translatex must be a number”错误？答案

【问题标题】：How to fix "transform with key of translatex must be a number" error in React Native?如何修复 React Native 中的“transform with key of translatex must be a number”错误？
【发布时间】：2020-12-23 23:47:18
【问题描述】：

我正在尝试在 React Native 中制作翻译动画。

这是我的代码

const scrollX = React.useRef(new Animated.Value(0)).current;

<Animated.ScrollView
     horizontal
     snapToInterval={width}
     onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { x: scrollX } } }],
        { useNativeDriver: false }
        )}
     scrollEventThrottle={16}
  ></Animated.ScrollView>

  <Animated.View style={{ transform: [{ translateX: multiply(scrollX, -1) }] }}>
          <Text>Some text</Text>
  </Animated.View>

我收到此错误transform with key of translatex must be a number

如果我将multiply(scrollX, -1) 更改为scrollX，动画就会反转，

我该如何解决这个问题？

【问题讨论】：

使用插值，然后使用外推属性，您可以提及字符串以及“0deg”到“360deg”

标签： react-native animation react-native-android transform

【解决方案1】：

我通过将 multiply 的导入从 react-native-reanimated 更改为 Animated 来修复它

【讨论】：

【解决方案2】：

我有这个问题，只是因为我忘了给Animated.View

【讨论】：

【解决方案3】：

const test = () => {

    const translation = useRef(new Animated.Value(0)).current;

    useEffect(()=> {
        Animated.timing(translation, {
            toValue: 200,
            useNativeDriver: true,
        }).start();
    }, []);
    
    return (
        <>
            <Animated.View style={{
                width: 150, height: 150, backgroundColor: 'red', borderRadius: 8, margin: 10, 
                transform: [{translateX:  translation}]
            }} />
        </>
    );
}
export default test;

需要给出你想做动画的地方 -> Animated.[组件名称] -> E.g: Animated.View / Animated.Text / Animated.Button

【讨论】：