我有一個 Pressable 組件，里面有一個圖示。我想按下它并旋轉 180 度，我該怎么做？
uj5u.com熱心網友回復：
因此，要做到這一點，您必須使用 react-native 中的 Animated 庫。您可以在其中制作影片值并制作函式來更新它們。這是您想要的完整示例（https://snack.expo.dev/@heytony01/grumpy-pretzel），下面是解釋。
首先匯入庫并制作影片值
import { Text, View, StyleSheet,Animated,TouchableWithoutFeedback } from 'react-native';
const spinValue = React.useState(new Animated.Value(0))[0]; // Makes animated value
接下來定義函式來更改值
// When button is pressed in, make spinValue go through and up to 1
const onPressIn = () => {
Animated.spring(spinValue, {
toValue: 1,
useNativeDriver: true,
}).start();
};
// When button is pressed out, make spinValue go through and down to 0
const onPressOut = () => {
Animated.spring(spinValue, {
toValue: 0,
useNativeDriver: true,
}).start();
};
棘手的部分是，為了在 react-native 中旋轉，您需要傳遞“0deg”或“12deg”等。
<View style={{
transform: [
{ rotate: "45deg" },
]
}}>
</View>
所以你要做的是將影片值插入到“0deg”到“360deg”
// spinDeg will be between '0deg' and '360deg' based on what spinValue is
const spinDeg = spinValue.interpolate({
useNativeDriver: true,
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
最后，您將 spinDeg 傳入您的按鈕并完成
// The animated style for scaling the button within the Animated.View
const animatedScaleStyle = {
transform: [{rotate: spinDeg}]
};
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
<TouchableWithoutFeedback
onPress={()=>{}}
onPressIn={onPressIn}
onPressOut={onPressOut}
>
<View style={{justifyContent:"center",alignItems:"center",backgroundColor:"lightgray",padding:15,borderRadius:20}}>
<Text>PRESS ME</Text>
<Animated.View style={[styles.iconContainer, animatedScaleStyle]}>
<Ionicons name="md-checkmark-circle" size={32} color="green" />
</Animated.View>
</View>
</TouchableWithoutFeedback>
</View>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/354870.html
上一篇：如何減少螢屏外的影片時間
下一篇：從左上角到右下角的SVG影片