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

【问题标题】：How to animate multiple component opacity with react native reanimated 2?如何使用 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>
)
}

这就是发生的事情

【问题讨论】：

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

【解决方案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>

【讨论】：