如何使用 react native reanimated 2 为多个组件不透明度设置动画？

Posted 2023-02-19

【中文标题】如何使用 react native reanimated 2 为多个组件不透明度设置动画？

【英文标题】：How to animate multiple component opacity with react native reanimated 2?

【发布时间】：2021-10-29 10:04:27

【问题描述】：

我正在学习 react native 复活。

我试图在用户按下按钮时同时显示多个组件。 但是当我按下按钮时，只有最后一个组件变为visible。 我正在使用react native reanimated2

这里是代码

const Baby = () => 
const signUpOpacity = useSharedValue(0.1);

const signUpTextStyle = useAnimatedStyle(() => 
    return 
      opacity: withTiming(signUpOpacity.value, 
        duration: 300,
      ),
    ;
  );

return(
<View>
 <TouchableOpacity onPress=() => (signUpOpacity.value = 1)>
      <Text style=styles.welcomeText>Welcome</Text>
    </TouchableOpacity>

 <Animated.View
      style=[
        width: 50,
        height: 50,
        backgroundColor: 'red',
        marginTop: 20,
      , signUpTextStyle]></Animated.View>
    <Animated.View
      style=[
        width: 50,
        height: 50,
        backgroundColor: 'red',
        marginTop: 20,
      , signUpTextStyle]></Animated.View>
  </View>
)

这就是发生的事情

【参考方案1】：

试试这个：

<Animated.View style=signUpTextStyle>
     <View style=
         width: 50,
         height: 50,
         backgroundColor: 'red',
         marginTop: 20,
          />
     <View style=
         width: 50,
         height: 50,
         backgroundColor: 'red',
         marginTop: 20,
         />
</Animated.View>