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

如何在React Native中显示静态图像

3 个答案: