未知的命名模块，使用组件将获得更新图像的道具

问题描述：

嗨当我尝试使用componentWillReceiveProps动态更新图像时，我遇到了错误“Unknown named Module”。本质上，我有一个主题组件，其中包含主题列表，当单击主题时，它会为另一个组件（缩略图）提供道具，并会填充与该主题相关的图像。未知的命名模块，使用组件将获得更新图像的道具

这里是缩略图组分一些代码：

import React, { Component } from 'react'; 
import { StyleSheet, Text, View, Image, Button } from 'react-native'; 
import Player from './player.js'; 
import styles from '../stylesheet.js'; 
let baseurl = '../assets/thumbnails/'; 
let extension = '.jpeg'; 
export default class Thumbnails extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     current: [ 
     require('../assets/thumbnails/narcolepsy-1.jpeg'), 
     require('../assets/thumbnails/narcolepsy-2.jpeg'), 
     require('../assets/thumbnails/narcolepsy-3.jpeg') 
     ] 
    } 
    } 
    componentWillReceiveProps(nextProps) { 
    setTimeout(()=>{ 
     let topic = nextProps.current.toLowerCase(); 
     let current = []; 
     for(let i = 1; i <= 3;i++){ 
     current.push(require(baseurl + topic + '-' + i + extension)); 
     } 
     this.setState({current,}) 
    },1000) 
    } 
    render() { 
    const thumbnails = this.state.current.map((path,i) => { 
     return(<Image 
       source={path} 
       style={styles["thumbnail"+(i+1)]} 
       key={"thumbnail"+i} />); 
     }) 
    return(
     <View style={{flexDirection:'row'}}> 
      {thumbnails} 
     </View> 
    ) 
    } 
}

我已经发现了类似的问题（React-native image - unknown named module '../img/2.jpeg'），其表示使用源= {URI： 'file.extension'}; 并保持图像资产在android/app/src/main/res/drawable文件夹中但是我没有android文件夹，因为我使用的是CRNA和Expo.io。这里是我的项目结构，请告诉我该怎么在这方面做的：

App.js   app.json  my-app-key.keystore stylesheet.js 
App.test.js  assets   node_modules  yarn.lock 
README.md  components  package.json

答

使用动态require通话不被本土做出反应打包的支持。这在文档中概述：React Native - Images

为了使其工作，必须静态地知道require中的图像名称。

// GOOD 
<Image source={require('./my-icon.png')} /> 

// BAD 
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 
<Image source={require('./' + icon + '.png')} /> 

// GOOD 
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); 
<Image source={icon} />

我建议建立一个静态的数据结构来保存你的图像，如喜欢的对象：

const images = { 
    narcolepsy: [ 
    require('../assets/thumbnails/narcolepsy-1.jpeg'), 
    require('../assets/thumbnails/narcolepsy-2.jpeg'), 
    require('../assets/thumbnails/narcolepsy-3.jpeg') 
    ], 
    apnea: [ 
    require('../assets/thumbnails/apnea-1.jpeg'), 
    require('../assets/thumbnails/apnea-2.jpeg'), 
    require('../assets/thumbnails/apnea-3.jpeg') 
    ] 
};

这种方式，在创建软件包时，打包器可以装入你的引用了。

未知的命名模块，使用组件将获得更新图像的道具

相关推荐