React Native require (изображение) возвращает число

Согласно документация, опора source для <Image /> принимает только путь к ресурсу (локальному или удаленному). Вот как это может выглядеть в вашем примере:

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;

Вы можете просто сделать это

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}

Не используйте require динамически. Подробное объяснение в этом посте: React Native - модуль требования к изображению с использованием динамических имен

Вам необходимо назначить источник изображения напрямую при использовании 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}

После некоторого исследования и некоторой помощи от @Fawaz и @Haider я понял, что require возвращает число. Это означает, что мы можем использовать число напрямую с источником вместо требования, и это работает.

<Image source = {11} />

Это должно отображать изображение с вашего локального ресурса, если у вас есть изображение, соответствующее этому номеру. Поэтому, когда вы хотите решить, показывать ли URL-адрес, отправленный сервером, или локальный ресурс, как в моем случае. мы можем пойти с ответом @Fawaz, который в основном вставляет {uri: "image-link"} или require ("image"), где require будет преобразован в число, а при использовании с источником вы поместите либо объект, либо число, которые стандартные способы согласно документации.

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',
  },
});

Внутренне статическое изображение React Native require разрешается как число.

Я могу доказать это с помощью объявления типа TypeScript 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.