React Native Image Changer - PullRequest
Новая
       6

React Native Image Changer

0 голосов
/ 04 марта 2019

У меня есть шесть изображений, я хочу изменить эти изображения с помощью двух кнопок, кнопки «Назад» и кнопки «Далее». Если я использую два изображения, нет проблем, но я использую шесть изображений, есть проблема.

image1 сс2 сс3

1 Ответ

0 голосов
/ 04 марта 2019

Таким образом, вы должны сохранить данные в массиве и выполнить 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

...