react-native - 如何使用 reanimated v2 更改背景颜色与过渡

Question

我是 react-native-reanimated 的新手。我正在尝试根据状态更改 backgorundCOlor。现在我有这样的代码：

const [visible, setVisible] = useState<boolean>(true)
const backgroundColor = useSharedValue(0);
const backgroundColorStyle = useDerivedValue(() => interpolateColor(backgroundColor.value, [0, 1], ['transparent', 'rgba(0, 0, 0 , .5)']) )

const backgroundInterpolate = useAnimatedStyle(() => ({
    backgroundColor: backgroundColorStyle.value
}), [])

  .... 

<Animated.View style={[{height: '65%'}, backgroundInterpolate]}> 
   ....

</Animated.View>

所以用这段代码我得到了这样的错误：

也许我把它弄得太复杂了，比如背景颜色随着过渡而变化。无论如何，我都会向你寻求帮助，因为我很累。

标签： react-nativereact-native-reanimated-v2

Answer 1

我将通过使共享值本身成为布尔值然后使用它来控制背景颜色来简化它

const backgroundColor = useSharedValue(false) 

const backgroundInterpolate = useAnimatedStyle(() => ({
    backgroundColor: backgroundColor.value ? 'transparent': 'rgba(0, 0, 0), .5)', 
}), [])