reactjs - 如何在本机反应中显示静态图像

Question

在我目前正在开发的应用程序中，加载应用程序时会显示一个主菜单屏幕（DashboardMain）。DashboardMain 由几个 DashIcon 组件组成，这些组件是自定义按钮，它们接收“源”道具以呈现图像。当我在 DashboardMain 组件中向组件传递一个源道具时，我收到文件位置的解析错误以及对 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');
            }}
          />

标签： reactjsimagereact-native

Answer 1

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

您也可以通过以下方式导入图像：

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

并将其指定为源：

<DashIcon source={profileInformationImg}/>