React Native -创建N个动画值

Question

我正在创建一个"调色板";组件，该组件有一个道具"paletteColors"

道具"paletteColors"是一个可变长度的数组，并包含代表颜色值作为字符串。

现在，在这个组件中，我正在映射这个属性以呈现N种颜色:

{paletteColors.map((paletteColor, index) => (
<Animated.View
key={index}
style={{ transform: [{ scale: getColorAnimatedScale(index) }] }}
>
<TouchableOpacity
onPress={() => handleOnSelectColor(index)}
style={[
styles.color,
{
backgroundColor: paletteColor,
},
]}
/>
</Animated.View>
))}

每次用户按下一个颜色，按下的动画视图将缩放，所以我需要创建N (palleteColors.length)动画值…

类似于此，但适应于给定的"paletteColors"数组:

const [firstColorScale] = useState(new Animated.Value(1)); 
const [secondColorScale] = useState(new Animated.Value(1));
const [thirdColorScale] = useState(new Animated.Value(1));
const [fourthColorScale] = useState(new Animated.Value(1));

任何想法?

Answer 1

这段代码为我工作:

const colorsScales = useRef(
paletteColors.map(
(_, index) =>
new Animated.Value(
index === defaultSelectedColorIndex
? selectedColorScale
: nonSelectedColorScale
)
)
);