3

为什么我不能在图像中使用状态

<Image source={require(this.state.image)} style={styles.img} />

我想更改图像，当我单击按钮时从数组中获取它，抽奖功能会更改图像状态，一切正常，但我无法将状态作为必需参数传递，如何解决？

import React, {Component} from 'react';
import {
  Platform, 
  StyleSheet, 
  Text, 
  View,
  Image
} from 'react-native';
import Button from './src/components/Button.js';

export default class App extends Component{

  constructor(props){
    super(props);

    this.state = {
      image: './src/assets/interrogacao.png',
    }

    this.imagesArray = [
      './src/assets/1.jpg',
      './src/assets/2.jpg',
      './src/assets/3.jpg',
    ]

    this.rafflePosition = this.rafflePosition.bind(this);

  }

  rafflePosition(){
    let state = this.state;
    let numRandom = Math.floor(Math.random() * this.imagesArray.length)
    this.state.image = this.imagesArray[numRandom];
    var teste = this.state.image;
    this.setState(state);
    alert('teste' + teste)
  }

  render() {
    return (
      <View style={styles.container}> 
        <Image source={require(this.state.image)} style={styles.img} />
        <Button onPress={this.rafflePosition} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  img: {
    width: 220,
    height: 220,
    marginBottom: 90
  }

});
4

2 回答 2

0

您可以像这样修改代码：使用 require(imagesArray[numRandom]) 从数组中提取图像路径，然后使用它。

    this.state = {
      image: './src/assets/interrogacao.png',
      imagesArray = [
      './src/assets/1.jpg',
      './src/assets/2.jpg',
      './src/assets/3.jpg',
    ]}

    this.rafflePosition = this.rafflePosition.bind(this);

  }

  rafflePosition(){
    const { image, imagesArray } = this.state;
    let numRandom = Math.floor(Math.random() * imagesArray.length);
    let path = require(imagesArray[numRandom]);
    this.setState({image: path});
  }
render() {
    return (
      <View style={styles.container}> 
        <Image source={this.state.image} style={styles.img} />
        <Button onPress={this.rafflePosition} />
      </View>
    );
  }
于 2019-12-06T05:47:01.657 回答
0

require 仅使用静态 URL。因此，用于代替静态 url 的变量将不起作用。因为，在绑定应用程序之前需要检查图像文件的存在，这甚至在渲染变量本身之前就会发生。

因此，您需要预先在变量中要求图像，然后将变量（其中包含已经需要的图像）分配给源，如下所示：

const image = require('path_to_image.png')

<Image source={image} />

于 2021-01-29T15:13:50.087 回答