Reactjs 如何使用react native中的按钮向下移动对象?
实际上,我想做类似的事情(附图片): 有一个盒子和两个按钮。如果我按Reactjs 如何使用react native中的按钮向下移动对象?,reactjs,react-native,react-native-image,Reactjs,React Native,React Native Image,实际上,我想做类似的事情(附图片): 有一个盒子和两个按钮。如果我按按钮1,则框将向左移动。如果我按下按钮2,则框将向右移动 我想,当框向右移动并克服条1时,然后框在条2上向下移动。 但是我不知道怎么做 这是我的代码: import React, {Component} from 'react'; import { View, Text, StyleSheet, Animated, TouchableOpacity, ScrollView, Image, } fro
按钮1
,则框将向左移动。如果我按下按钮2
,则框将向右移动
我想,当框
向右移动并克服条1
时,然后框
在条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,
},
});
import React,{Component}来自'React';
进口{
看法
文本,
样式表,
有生气的
可触摸不透明度,
滚动视图,
形象,,
}从“反应本机”;
导出默认类应用程序扩展组件{
建造师(道具){
超级(道具);
此.state={
左:20,,
};
}
moveRight=()=>{
this.setState({left:this.state.left+10});//10是更改的值。
};
moveLeft=()=>{
this.setState({left:this.state.left-10});//10是更改的值。
};
render(){
返回(
);
}
}
const styles=StyleSheet.create({
容器:{
弹性:1,
},
文本中心:{
对齐自我:“中心”,
textAlign:'中心',
},
水平标题:{
fontWeight:'粗体',
尺码:35,
颜色:“#CC8A4F”,
},
按钮容器:{
flexDirection:'行',
justifyContent:'之间的空间',
玛金托普:200,
paddingLeft:80,
paddingRight:80,
},
});
请帮帮我强>
谢谢