gpt4 book ai didi

javascript - 如何在 React Native 中点击移动图片

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:59:46 24 4
gpt4 key购买 nike

我最近一直在学习 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com