React Native 要求（图像）returns 数字

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 并且反应本机抛出错误说 'value for uri cannot be cast from Double to String'。

非常感谢您的帮助。

谢谢

Answer 1

根据 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;

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。详细解释在此post：

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

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

<Image source={11} />

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

Answer 6

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 7

在内部，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.

之一

React Native 要求（图像）returns 数字

React Native require(image) returns number

javascript

require

reactjs

react-native