反应原生的图像前进和后退

Question

我正在使用react-native运行示例应用程序。我有2个按钮，即向前和向后。如何编写下面提到的2点的功能。

1. When i click forward button then screenshot is shown below.

2. When i click backward button then screenshot is shown below.

Answer 1

我在React.js中写了这个，你可以移植它

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {
      imageIndex: 2
    }

    this.setIndex = this.setIndex.bind(this)

  }

  setIndex(index) {

    this.setState(Object.assign({}, this.state, {
      imageIndex: index
    }));

  }

  render() {
  
    const { imageIndex } = this.state

    let imgClasses = [
      "ph bg-green",
      "ph bg-blue",
      "ph bg-green",
      "ph bg-red"
    ]

    return (
      <div className="container">  
        { imgClasses.map((img, i) =>
          <div onClick={ () => this.setIndex(i) }
          className={`${img}${ imageIndex == i ? " active" : ""}`}
          style = {{
              top: 60 * i,
              left: 60 * i
            }}>
          </div>
        ) } 
      </div>
    )

  }

}


ReactDOM.render( <App /> , document.getElementById('app'));

.container {
  position: relative;
}

.ph {
  width: 100px;
  height: 100px;
  margin: 4px;
  position: absolute;
  border: 1px #fff solid
}

.ph.active {
  z-index: 10;
}

.bg-green {
  background: #8BC34A;
}

.bg-blue {
  background: #03A9F4;
}

.bg-red { 
  background: #E91E63;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>