Question

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

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

});

Answer 1

您可以这样修改代码：使用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>
    );
  }

Answer 2

require 仅使用静态 url。因此，代替静态 url 使用的变量将不起作用。因为，需要在捆绑应用程序之前检查图像文件是否存在，甚至在呈现变量本身之前就会发生这种情况。

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

const image = require('path_to_image.png')

<Image source={image} />

图像中的本机使用状态需要

2 个答案: