反应本机图像转换器

Question

我有六张图片，我想用两个按钮、后退按钮和下一张更改这张图片 button.If 我使用两张图片没有问题，但我使用六张图片有问题。

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

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

反应本机图像转换器

React Native Image Changer

reactjs

react-native

native