我最近一直在学习 React Native,但还没有真正找到一种操作 DOM 的方法。
我一直在努力做到这一点,如果我点击 TouchableHighlight,我的图像会向下移动几个像素,但我还没有设法让它移动,老实说,我不知道如何从在这里。
我的 onclick 函数有效,因为它会在每次单击按钮时返回日志。
截至目前,我有这个:
export default class MainBody extends Component {
onclick = () => {
console.log('On click works')
};
render() {
return (
<ScrollView showsHorizontalScrollIndicator={false} style={Style.horList} horizontal={true}>
<View >
{/*i need to move this Image down!*/}
<Image source={require("./img/example.png")}/>
<View>
<Text style={Style.peopleInvited}>This is text</Text>
</View>
{/*When clicked on this touchable highlight!*/}
<TouchableHighlight onPress={this.onclick}}>
<Image source={require('./img/moveImg.png')}/>
</TouchableHighlight>
</View>
</ScrollView>
}
如果有人可以帮助我解决这个问题,将不胜感激。 非常感谢您的参与!
最佳答案
有很多方法可以做到这一点,但也许最简单的方法是使用状态。
class MainBody extends Component {
constructor(props) {
super(props);
this.state = {
top: 0 // Initial value
};
}
onclick = () => {
console.log('On click works')
this.setState( { top: this.state.top + 5 }) // 5 is value of change.
};
render() {
return (
<ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
<View >
{/*i need to move this Image down!*/}
<Image style={{top: this.state.top}}source={require("./img/example.png")}/>
<View>
<Text>This is text</Text>
</View>
{/*When clicked on this touchable highlight!*/}
<TouchableHighlight onPress={this.onclick}>
<Image source={require("./img/moveImg.png")}/>
</TouchableHighlight>
</View>
</ScrollView>
);
}
}
关于javascript - 如何在 React Native 中点击移动图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43128560/