反应原生图像转换器

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