React Native require(image) 返回数字

Question

我有一个带有一个组件 EventCard 的 js 文件，它包含事件名称、日期、事件图像等。如果事件图像不存在，我想加载一个占位符图像。现在该语句看起来像这样

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : require("../assets/images/image.jpg");
    this.state = {image: imgUrl}
}

我在渲染中使用 this.state 来获取类似

的源

source={{uri: this.state.image}}

在对占位符图像进行 require 时，我奇怪地得到 11，并且 react native 抛出错误说“uri 的值不能从 Double 转换为 String”。

非常感谢您的帮助。

谢谢

Answer 1

在内部，React Native 静态图像 require 解析为数字。

我可以用 React Native typescript 类型声明来证明。

// your file
import { ImageSourcePropType } from 'react-native';

// @types/react-native
/**
 * @see https://facebook.github.io/react-native/docs/image.html#source
 */
export type ImageSourcePropType = ImageURISource | ImageURISource[] | ImageRequireSource;
...
export type ImageRequireSource = number;

ImageRequireSource 类型只是 number 类型。 它可以是ImageSourcePropType 之一。

Answer 2

You can try this,

import React, {Component} from 'react';
import {StyleSheet,ImageBackground} from 'react-native';

import bgSrc from './images/bgfrm.png';

export default class Wallpaper extends Component {
  constructor(props){
    super(props);
    let imgUrl = props.image ? props.image :bgSrc;
    this.state = {image: imgUrl};
}

  render() {
    return (
      <ImageBackground style={styles.picture} source={this.state.image}>
        {this.props.children}
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'cover',
  },
});

Answer 3

经过@Fawaz 和@Haider 的一些研究和一些帮助，我了解到需要返回一个数字。这意味着我们可以直接将数字与 source 一起使用而不是 require 并且它可以工作

<Image source={11} />

如果您有任何与该数字对应的图像，这应该会显示来自本地资源的图像。因此，当想要决定是显示服务器发送的 url 还是像我这样的本地资源时。我们可以使用@Fawaz 答案，它基本上插入一个 {uri: "image-link"} 或 require("image") 其中 require 将被解析为一个数字，当与 source 一起使用时，您将放置对象或数字根据文档的标准方法。

Answer 4

使用require时需要直接指定图片源。

constructor(props){
  super(props);
  let imgUrl = props.image ? { uri: props.image } : require("../assets/images/image.jpg");
  this.state = { image: imgUrl };
}

然后在你的渲染中：

source={this.state.image}

Answer 5

不要动态使用require。这篇文章的详细解释： React Native - Image Require Module using Dynamic Names

Answer 6

你可以这样做

constructor(props){
    super(props);
    let imgUrl = props.image ? props.image : null
    this.state = {image: imgUrl}
}

source={imgUrl == null ? require("../assets/images/image.jpg") : this.state.image}

Answer 7

根据documentation，<Image /> 的source 属性只接受资源的路径（本地或远程）。在您的示例中可能如下所示：

import React, { Component } from 'react';
import { Image } from 'react-native';


class EventCard extends Component {

  constructor(props) {
    super(props);

    const imgUrl = props.image || require('../assets/images/image.jpg');
    this.state = { image: imgUrl };
  }

  render() {
    return (
      <Image
        source={this.state.image}
      />
    );
  }
}

export default EventCard;