如何在本机中显示静态图像

Question

在我正在处理的应用程序中，我在加载应用程序时显示主菜单屏幕（DashboardMain）。 DashboardMain由几个DashIcon组件组成，这些组件是自定义按钮，用于接收“源”支柱以呈现图像。当我在DashboardMain组件中传递组件源prop时，我得到文件位置的解析错误和require方法的预期global（）调用。任何人都可以解释如何解决这个问题。

文件目录如下所示：

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

一个问题是代码在文件是jpg时指定了png。

您也可以这样导入图像：

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

并将其指定为来源：

<DashIcon source={profileInformationImg}/>

Answer 2

你这样做

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 3

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