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

问题描述 投票:0回答:3

在我正在处理的应用程序中,我在加载应用程序时显示主菜单屏幕(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');
            }}
          />
reactjs image react-native
3个回答
0
投票

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

您也可以这样导入图像:

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

并将其指定为来源:

<DashIcon source={profileInformationImg}/>

0
投票

你这样做 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'); }} />


0
投票
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');
                }}
              />
热门问题
推荐问题
最新问题