Javascript 无法在 React Native Expo 应用程序中找到图像文件

您在React Native中使用的是Expo，因此这意味着需要以与您使用的方法稍有不同的方式加载图像.您当前直接从相对路径加载图像文件的try 不起作用，因为bundler不知道要包括它们.

require function通常用于在Reaction Native中导入图像，因为它可以动态Bundle 这些资源.因此，您应该更改图像导入，如以下代码所示:

const stories = [
    require('./assets/story1.jpg'), 
    require('./assets/story2.jpg'), 
    require('./assets/story3.jpg'), 
    require('./assets/story4.jpg'), 
    require('./assets/story1.jpg'), 
    require('./assets/story1.jpg')
];

const StoriesView = ({ stories }) => {
    return (
        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.storiesScrollView}>
            <View style={styles.storiesContainer}>
                {stories.map((source, index) => (
                    <Image
                        key={index}
                        style={styles.storyImage}
                        source={source}
                    />
                ))}
            </View>
        </ScrollView>
    );
};

您可以看到require，用于从本地资源导入每个图像文件.然后，它们被直接传递给Image组件的sourceprops ，而不是使用字符串URI.

但要知道，这种方法将不能动态加载图像名称，因为在Bundle 时处理require条语句，应用程序已经开始运行before条.对文件路径进行判断，并将图像加载到应用程序的Bundle 包中，这意味着需要首先明确定义它们.

require函数不支持动态图像导入.在构建应用程序的Bundle 包时，绑定者需要知道它应该包括的所有assets资源 .如果使用像require('./assets/' + name)这样的动态表达式，则Bundle 器不知道要包括图像，因为它事先不知道name的值.

以下是你可能会做的一个例子:

import React, { Component } from 'react';
import { Image, StyleSheet, AppRegistry } from 'react-native';

const images = {
  story1: require('./assets/story1.jpg'),
  story2: require('./assets/story2.jpg'),
  story3: require('./assets/story3.jpg'),
  // add more images as needed
};

const ImageWithRequire = ({ name }) => {
  const image = images[name];

  return (
    <Image
      key={name}
      style={styles.storyImage}
      source={image}
    />
  );
};

const styles = StyleSheet.create({
  storyImage: {
    width: 100,
    height: 100,
  },
});

AppRegistry.registerComponent('ImageWithRequire', () => ImageWithRequire);

With const images, all possible images are required upfront and stored.
You can then use the name prop to select the right image from the images object. That allows you to determine the image to display at runtime while still including all possible images in the app's bundle.

示例:<ImageWithRequire name="story1" />