反应本地图像转换器

Question

我有六个图像，我想用两个按钮，后退按钮和下一个按钮更改此图像。如果我使用两个图像没有问题，但是我使用六个图像有问题。

ss2 ss3

Answer 1

因此，您必须将数据保留在一个数组中，并在按钮上单击到下一个索引时执行索引的setState。 假设当前索引为0，当您单击下一步时，将索引增加到1并执行setState。 例如，

import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { View, TouchableOpacity, Image, Text } from 'react-native';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            images: [],
            selectedIndex: 0
        }
    }

    _ToggleNext = () => {
        if(this.state.selectedIndex == this.state.images.length - 1)
            return;

        this.setState(prevState => ({
            selectedIndex: prevState.selectedIndex + 1
        }))
    }

    _TogglePrev = () => {
        if(this.state.selectedIndex == 0)
         return;

        this.setState(prevState => ({
            selectedIndex: prevState.selectedIndex - 1
        }))
    }

    render() {
        const {selectedIndex, images} = this.state;
        return (
             <View>
                  <Image
                    source={{ uri: images[selectedIndex]}}
                    style={styles.image}
                  />
                  <TouchableOpacity onPress={this._ToggleNext}>
                    <Text>Next</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={this._TogglePrev}>
                    <Text>Pr</Text>
                  </TouchableOpacity>
             </View>
        )
    }
}

编辑：链接-https://snack.expo.io/rysnt5iUV