React-native: проблема «this.props.imageSource»

Question

Когда я использую динамическое изображение src и запускаю NPM, я получаю эту ошибку:

TargetModuleName "." This.props.imageSource ",: message": "Невозможно разрешить модуль ...

Но когда я добавляю постоянный URL, он отлично работает.

Это мой код:

import React, { Component } from 'react';

import { StyleSheet, Text, View, ScrollView, Image } from 'react-native';

import CustomImage from './CustomImage';

export default class ContentContainer extends React.Component {
  render() {
    return (
      <View style={styles.contentContainer}>

          <View style={styles.col2}>
              <CustomImage imageSource={'../img/shirts.jpg'} />
          </View>
          <View style={styles.col1}></View>
          <View style={styles.contentBanner}></View>

      </View>
    );
  }
}

//------------ CustomImage.js -----------------------
import React, { Component } from 'react';
import PropTypes from 'react';
import { StyleSheet,AppRegistry, Text, View, ScrollView, Image } from 'react-native';


export default class CustomImage extends React.Component {
  render() {
    return (
        <Image source={require('this.props.imageSource')} style={styles.Image} />


    );
  }
}

Answer 1

Прежде всего, ваш синтаксис неверен.Это должно быть примерно так:

require(this.props.imageSource)

Даже если вы исправите этот синтаксис, он не будет работать, потому что локальные источники изображений не могут быть динамическими, потому что их нужно компилировать при сборке.Из-за этого путь к изображению должен быть известен.

Вы можете прочитать об этом больше на Документация по изображениям