Как показать статическое изображение в реагировать на родной

Question

В приложении, над которым я сейчас работаю, при загрузке приложения отображается экран главного меню (DashboardMain). DashboardMain состоит из нескольких компонентов DashIcon, которые являются пользовательскими кнопками, которые получают реквизит «источника» для визуализации изображения. Когда я передаю компоненту исходную информацию в компоненте DashboardMain, я получаю ошибку синтаксического анализа местоположения файла и ожидаемый вызов global () для метода require. Может кто-нибудь объяснить, пожалуйста, как это исправить.

Каталог файлов выглядит так:

dashboard_components(folder)
           |
   ________|_______________
   |                      |
DashboardMain.js    dashImages(folder)
                          |
                 _________|____________
                 |                    |
        profileInformation.jpg     index.js

Вот код:

class DashboardMain extends Component {
  render() {
    return (
      <HomeCard>
        <IconFieldRow>
          <DashIcon
            iconName='Profile Information'    
            source{require('./dashImages/profileInformation.png')}     
            onPress={() => {
              this.props.navigation.navigate('Info');
            }}
          />

Answer 1

Вы просто делаете

import ImageName from './dashImages/profileInformation.jpg';
 class DashboardMain extends Component {
  render() {
    return (
      <HomeCard>
        <IconFieldRow>
          <DashIcon
            iconName='Profile Information' source= {ImageName} onPress={() => {
              this.props.navigation.navigate('Info');
            }}
          />

Answer 2

import profileInformation from './dashImages/profileInformation.png';

class DashboardMain extends Component {
      render() {
        return (
          <HomeCard>
            <IconFieldRow>
              <DashIcon
                iconName='Profile Information'    
                source={profileInformation}     
                onPress={() => {
                  this.props.navigation.navigate('Info');
                }}
              />

Answer 3

Одной из проблем является то, что код указывает png, когда файл является jpg.

Вы также можете импортировать изображение следующим образом:

import profileInformationImg from './dashImages/profileInformation.jpg'

И указать его в качестве источника:

<DashIcon source={profileInformationImg}/>