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

Question

我正在学习反应原生复活。

我试图在用户按下按钮时同时使多个组件可见。但是当我按下按钮时，只有最后一个组件变成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>
)
}

这是发生的事情

Answer 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>