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

执行占位符图像要求时，我奇怪地得到11，而react native抛出错误，说“ uri的值不能从Double转换为String”。

非常感谢您的帮助。

谢谢

Answer 1

使用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 2

您可以简单地做到这一点

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 3

请勿动态使用require。这篇文章中的详细说明： React Native - Image Require Module using Dynamic Names

Answer 4

经过一些研究并得到@Fawaz和@Haider的帮助，我知道require需要返回一个数字。这意味着我们可以直接在源代码中使用数字，而不是require，并且可以使用

<Image source={11} />

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

Answer 5

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 6

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

我可以用React Native打字稿类型声明来证明。

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

根据documentation，source的{{1}}属性仅采用到资源的路径（本地或远程）。这就是您的示例中的外观：

<Image />

React Native require（image）返回数字

7 个答案: