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

我有一个屏幕上，我想有4个图像

我怎样才能使它在单击图像时转到阵列中的下一个图像（我想这就是它的制作方式）。除了触摸屏之外，我还希望有按钮可以转到下一个图像或返回到上一个图像

我希望有人能在这方面帮助我。我不知道该怎么做。我想找到实现它的最佳方法

谢谢大家!

更新：

---

多亏了Codesingh的回答，一切都正常了

我认为你有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>
)
    }
    }

---

干杯：）

您还可以对@Codesingh的答案进行一点修改，使其成为一个无限循环。我还将其更改为不特定于您拥有的图像数量，并按照推荐的JS编码标准正确格式化：

（注：未经测试）

const arr=[require（'image1'）、require（'image2'）、require（'image3'）；
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
柜台:0,，
}
}
更改图像（按钮）{
如果（按钮==1）{
如果（this.state.counter==arr.length-1）this.setState（{counter:0}）
else this.setState（{counter:this.state.counter+1}）
}否则{
如果（this.state.counter==0）this.setState（{counter:arr.length-1}）
else this.setState（{counter:this.state.counter-1}）
}
}
render（）{
让button1=false，button2=false；
if（this.state.counter==0）{
//使“上一步”按钮禁用
按钮2=真；
} 
if（this.state.counter==（arr.length-1））{
按钮1=真；
} 
返回(
下一个
以前的
)
}
}

谢谢您的回答，但我有一个小问题，如果可能的话，请检查一下。我已经更新了我的帖子。非常感谢！请使用您正在使用的不同版本进行更新-您可以使用以下命令找到react native版本：

react native-v

。还有，你有什么错误吗？很抱歉！这些是我正在使用的react:react-native cli:2.0.1 react-native:0.42.0版本。只有启用远程调试时，我才会收到错误。否则，只需一个白色屏幕，大约30秒后，应用程序停止响应并崩溃。我在错误的主要帖子中添加了两个截图。完整的一个太长了。快问。我试着让它像罗布在你下面建议的那样循环，但我似乎无法让它工作。你知道怎么做吗？我没有错误，只是不起作用。我想能够只需按下加号按钮和图像循环。其他一切都像你做的那样完美。谢谢当你按下加号按钮时，发生了什么？实际上什么都没有。只有减号按钮会转到上一个图像。但是加号没有任何作用。如果我像下面的罗布那样做。另外，如果在到达最后一张图像后按减号，它将不会循环。于是应用程序启动了。我可以点击两次减号按钮，然后什么也没有。问题是：如果（按钮==1）{if（this.state.counter==arr.length-1）this.setState（{counter:0}）或者this.setState（{counter:this.state.counter+1}），只要代码中的this.state.counter到达数组末尾，就将状态更改为0。。但是this.state.counter永远不会到达，因为它不会递增，并且只有当它进入注释中的上述if语句时才会递增，并且它永远不会到达内部，所以按钮不执行任何操作：）

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}) 
    }
  }

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>
    )
  }
}