我們只是想讓一個影像在螢屏上移動，然后快速回到中間，我們在下面有我們的代碼并且作業正常，當前樣式為一個可以移動的藍色框，但我們無法弄清楚我們如何可以修改藍框為我們需要的圖片。
import React, { useRef } from "react";
import { Animated, PanResponder, StyleSheet, View, Image } from "react-native";
const Users = [{id:"1", uri: require('./assets/present.jpeg'), keyword: 'present1'}]
const DraggableView = () => {
const position = useRef(new Animated.ValueXY()).current;
console.log(pan)
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: pan.x, // x,y are Animated.Value
dy: pan.y,
},
]),
onPanResponderRelease: () => {
Animated.spring(
pan, // Auto-multiplexed
{ toValue: { x: 0, y: 0 } } // Back to zero
).start();
},
});
return (
<View style={styles.container}>
<Animated.View
{...panResponder.panHandlers}
style={[pan.getLayout(), <Image source={require('./assets/present.jpeg')}/>}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
box: {
backgroundColor: "#61dafb",
width: 80,
height: 80,
borderRadius: 4,
},
});
export default DraggableView;
uj5u.com熱心網友回復：
該<Image />組件應該是該組件的子<Animated.View />組件。目前，您在 style 道具中定義了它，但它不起作用。
const DraggableView = () => {
const position = useRef(new Animated.ValueXY()).current;
console.log(pan)
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: pan.x, // x,y are Animated.Value
dy: pan.y,
},
]),
onPanResponderRelease: () => {
Animated.spring(
pan, // Auto-multiplexed
{ toValue: { x: 0, y: 0 } } // Back to zero
).start();
},
});
return (
<View style={styles.container}>
<Animated.View
{...panResponder.panHandlers}
style={pan.getLayout()}
>
<Image source={require('./assets/present.jpeg')}/>
</Animated.View>
</View>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537832.html