React-Native：如何制作图像数组

Question

我有一个屏幕，我想在其上显示 4 张图像。

我怎样才能做到这一点，以便当我单击图像时，它会转到数组中的下一个（我想这就是它的制作方式）。除了触摸之外，我还希望有按钮可以转到下一张图像或返回上一张图像。

我希望有人可以帮助我解决这个问题。我不知道如何处理它。我想找到实现它的最佳方法。

谢谢！

更新： 感谢 Codesingh 的回答，一切正常！

Answer 1

我正在考虑您有 3 张图片。

请看一下：

    var arr=[{image:require('image1')},{image:require('image2')},{image:require('image3')}];

    Class CoolSlider extends component{

    constructor(props)
    {
      super(props);
      this.state = {
        counter:0,
      }
    }

    changeImage(button)
    {
      if(button == 1)
      {
        this.setState({counter: this.state.counter + 1})
      }
      else
      {
        this.setState({counter: this.state.counter - 1}) 
      }

    }

    render()
    { 

      let button1 = false,button2 = false; 
     if(this.state.counter == 0)
      {
        //make the previous button disable
         button2=true;
      } 

     if(this.state.counter == 2)
     {
         button1=true;
     } 

    //     if(arr.length == 1 )
    //    {
    //        button1=true;
    //        button2=true;  
    //    }
return (
    <View>
    <Image source = {arr[this.state.counter].image} />
    <TouchableHighlight disabled={button1} onPress = this.changeImage(1)>
    <Text>
      Next
    </Text>
    </TouchableHighlight>

    <TouchableHighlight disabled={button2} onPress = this.changeImage(2)>
    <Text>
      Previous
    </Text>
    </TouchableHighlight>
)
    }
    }

编辑在这里：

changeImage(button) {
    if(button == 1) {
      //if you reach the end i.e below statement then counter 0
      if (this.state.counter == arr.length - 1) this.setState({counter: 0})
      else this.setState({counter: this.state.counter + 1})
    }
    //similarly if you reach the starting then counter will be at end of the 
    array 
    else {
      if (this.state.counter == 0) this.setState({counter: arr.length - 1})
      else this.setState({counter: this.state.counter - 1}) 
    }
  }

干杯:)

Answer 2

您也可以通过对@Codesingh 的答案进行小幅修改来使其成为无限循环。我还将其更改为不特定于您拥有的图像数量，并根据推荐的 JS 编码标准对其进行正确格式化：

（注意：未经测试）

const arr = [require('image1'), require('image2'), require('image3')];

Class CoolSlider extends component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
  }

  changeImage(button) {
    if(button == 1) {
      if (this.state.counter == arr.length - 1) this.setState({counter: 0})
      else this.setState({counter: this.state.counter + 1})
    } else {
      if (this.state.counter == 0) this.setState({counter: arr.length - 1})
      else this.setState({counter: this.state.counter - 1}) 
    }
  }

  render() {
    let button1 = false,button2 = false; 
    if(this.state.counter == 0) {
      //make the previous button disable
      button2=true;
    } 

    if(this.state.counter == (arr.length - 1)) {
      button1=true;
    } 


    return (
      <View>
        <Image source = {arr[this.state.counter]} />
        <TouchableHighlight disabled={button1} onPress = this.changeImage(1)>
          <Text>
            Next
          </Text>
        </TouchableHighlight>

        <TouchableHighlight disabled={button2} onPress = this.changeImage(2)>
          <Text>
            Previous
          </Text>
        </TouchableHighlight>
      </View>
    )
  }
}