【问题标题】:React Native Image Changer反应原生图像转换器
【发布时间】:2019-03-04 18:33:16
【问题描述】:

我有六张图片,我想用两个按钮、后退按钮和下一步按钮更改这些图片。如果我使用两张图片没问题,但我使用六张图片有问题。

ss2 ss3

【问题讨论】:

  • 欢迎来到Stack Overflow!类似于“我想做 X;有人能告诉我如何编写代码吗?”这样的问题。在 Stack Overflow 上被认为是题外话。请参阅help center 了解更多详情。请注意,如果您的问题是“我想做 X 并且我尝试了接近 Y 但它没有用;谁能帮我弄清楚我做错了什么?”那么这个问题是 Stack Overflow 上的话题,你会发现很多人愿意帮助你解决问题。

标签: reactjs react-native native


【解决方案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

【讨论】:

  • 感谢我尝试添加图片的方式,但出现错误 this.state = { images: [('./images.png')], selectedIndex: 0 }
  • 嗯,所以如果你添加 this.state = { images: ['./images.png', './images1.png', './images2.png', './images3.png', './images4.png'] 那么你需要改变 Image 的来源有点不同。欲了解更多信息,请尝试facebook.github.io/react-native/docs/imagestackoverflow.com/questions/53482449/…
  • 我尝试了,但图像似乎没有 this.state = { images: ['./image1.png','./image2.png', './image3.png'], selectedIndex: 0 }
  • 这就是我提供其他两个链接的原因:) 所以你需要将&lt;Image source={{ uri: images[selectedIndex]}} style={styles.image} /&gt; 更改为&lt;Image source={require(images[selectedIndex])} /&gt; 试试这个会起作用。
  • 我尝试了两个链接并更改了 [] 。但这次我有错误代码 500
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-27
  • 2018-05-04
  • 2016-06-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多