如何在React Native中使用按钮向下移动对象？

问题描述

实际上我想做类似的事情（附有图片）：

有一个盒子和两个按钮。如果我按button 1，则Box向左移动。如果我按button 2，则Box向右移动。

我想要的是，当Box向右移动并克服bar 1时，Box在bar 2上向下移动。 但是我不知道该怎么做。

这是我的代码：

import React,{Component} from 'react';
import {
  View,Text,StyleSheet,Animated,TouchableOpacity,ScrollView,Image,} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      left: 20,};
  }

  moveRight = () => {
    this.setState({left: this.state.left + 10}); // 10 is value of change.
  };

  moveLeft = () => {
    this.setState({left: this.state.left - 10}); // 10 is value of change.
  };

  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{left: this.state.left,height: 120,width: 120}}
          source={require('./assets/Box.png')}
        />

        <Image
          style={{height: 20,width: 180,marginTop: -12,marginLeft: 25}}
          source={require('./assets/log.png')}
        />

        <Image
          style={{height: 20,width: 200,marginTop: 150,marginLeft: 185}}
          source={require('./assets/log.png')}
        />

        <View style={styles.buttonsContainer}>
          <TouchableOpacity onPress={this.moveLeft}>
            <Image
              style={{height: 60,width: 60}}
              source={require('./assets/left-button.png')}
            />
          </TouchableOpacity>

          <TouchableOpacity onPress={this.moveRight}>
            <Image
              style={{height: 60,width: 60}}
              source={require('./assets/right-button.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,},textCenter: {
    alignSelf: 'center',textAlign: 'center',levelheading: {
    fontWeight: 'bold',fontSize: 35,color: '#CC8A4F',buttonsContainer: {
    flexDirection: 'row',justifyContent: 'space-between',marginTop: 200,paddingLeft: 80,paddingRight: 80,});

请帮助我！

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）