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

标签 javascript dom react-native dom-manipulation

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

相关文章:

javascript - 属性节点的 hasChildNodes() 为 Chrome 和 Firefox 返回不同的结果

javascript - 是否可以在没有 onPaste 处理程序的情况下读取 Chrome 中的剪贴板内容?

javascript - 访问引号内的函数

react-native - 找不到 com.android.support :support-v4:23. 2.1

javascript - getLoginStatus 不返回 session

javascript - 如何以编程方式在 Firefox 操作系统手机上调用电话

javascript - 使用包含当前值的 float DIV 自定义 HTML 范围输入

javascript - Recharts 不在 LineBarAreaComposedChart React 上显示负值

javascript - 正在计算(数量 * 费率 = 金额),但可以通过检查元素更改

react-native - React Native PayPal 集成没有服务器依赖性?