如何使用React Native从图像后面移动按钮

npx react-native init YourProjectName

cd YourProjectName

import React from 'react';
import { View, Image, Button } from 'react-native';

const App = () => {
  return (
    <View>
      <Image source={require('./path/to/your/image.jpg')} />
      <Button title="Move Button" onPress={() => {}} />
    </View>
  );
};

export default App;

import React, { useState, useEffect } from 'react';
import { View, Image, Button, Animated } from 'react-native';

const App = () => {
  const [buttonPosition, setButtonPosition] = useState(new Animated.Value(0));

  useEffect(() => {
    Animated.timing(buttonPosition, {
      toValue: 100, // 移动的距离
      duration: 1000, // 动画持续时间
      useNativeDriver: true, // 使用原生驱动器以提高性能
    }).start();
  }, []);

  return (
    <View>
      <Image source={require('./path/to/your/image.jpg')} />
      <Animated.View style={{ transform: [{ translateX: buttonPosition }] }}>
        <Button title="Move Button" onPress={() => {}} />
      </Animated.View>
    </View>
  );
};

export default App;

npx react-native run-android // for Android
npx react-native run-ios // for iOS