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

Question

У меня есть файл js с одним компонентом EventCard, который принимает имя события, дату, изображение события и т. Д. Если изображение события не существует, я хочу загрузить изображение заполнителя.Теперь это утверждение выглядит такошибка родного броска, говорящая, что «значение для uri не может быть приведено от Double к String».

Помощь очень ценится.

Спасибо

Answer 1

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 2

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

<Image source={11} />

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

Answer 3

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

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

Answer 5

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

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 6

Согласно документации , реквизит 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;