Question

您好我在尝试使用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'），说要使用source = {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

Answer 1

React Native打包程序不支持使用动态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')
  ]
};

这样，打包程序可以在创建包时加载您的引用。

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

1 个答案: