Не удалось найти файл изображения в React Native

Question

Я определил класс React Native, который предназначен для заполнения ячейки «tableView» ссылкой на изображение, которая является опорным входом для класса.Это вызывается с использованием FlatList.Однако этот класс не может найти ссылку на входное изображение в комплекте, если он указан с помощью тега источника изображения.Его можно найти, только если это жестко заданная ссылка.

Класс определяется следующим образом:

class ListItem extends React.PureComponent {
    _onPress = () => {
        this.props.onPressItem(this.props.index);
    }

    render() {
        const item = this.props.item; 

        console.log("ChannelSelection Mix Button artwork: ", item.artwork);
        return (
          <TouchableHighlight
            onPress={this._onPress}
            underlayColor="transparent">
            <View>
              <View style={styles.rowContainer}>
                <Image source={{ uri: item.artwork }} style={styles.buttonContainer} />
                <View style={styles.mixButtonTitleContainer}>
                  <Text style={styles.mixButtonTitle}
                    numberOfLines={2}>{item.channelTitle}</Text>
                </View>
              </View>
            </View>
          </TouchableHighlight>
        );
    }
}

Когда этот класс вызывается, я получаю предупреждение:

Warning
Could not find image file:///Users/myname/Library/Developer/CoreSimulator/Devices/34AE8A68-E69D-4804-B3C4-96DE7A051B9B/data/Containers/Bundle/Application/C79368E9-3D1B-492C-B72B-9BF5C4D3262B/myApp.app/./Resources/MissingAlbumArt.png

Вывод на консоль для печати item.artwork:

'ChannelSelection Mix Button artwork: ', './Resources/MissingAlbumArt.png'

, поэтому вы можете видеть, что имя файла передается правильно.

Обратите внимание, чтоесли я изменю строку:

<Image source={{ uri: item.artwork }} style={styles.buttonContainer} />

на:

<Image source={require('./Resources/MissingAlbumArt.png')} style={styles.buttonContainer} />

, тогда ошибка исчезнет.

Итак, как правильно ссылаться на файлы .png вмой каталог ресурсов?И почему мои файлы .png отсутствуют в каталоге Resources моего пакета?

Answer 1

Использование изображений с require

Один из способов использования изображений в комплекте.Вы получаете доступ к этим изображениям с помощью

const imageName = require('./path/to/the/image/imageName.png'); 

. Для изображений, которые я добавляю таким образом, я на самом деле создаю файл (называемый Images.js), который содержит все мои требования, а затем экспортирует изображения.Таким образом, в файле это будет список требований, подобных этому

export const imageName = require('./path/to/the/image/imageName.png'); 

Затем, когда я хочу использовать изображение, я импортирую изображение следующим образом:

import { imageName } from '.path/to/Images.js';

Использование изображений наустройство

Другой способ - загрузить файл и сохранить его в каталоге документов приложения.Обычно вы используете rn-fetch-blob или react-native-fs для загрузки и сохранения файла в определенном месте, например в каталоге документов.

Затем вы должны построить путь к файлу и использовать его.Например, если вы использовали react-native-fs, вы могли бы построить путь следующим образом:

let pathToImage = RNFS.DocumentDirectoryPath + '/path/to/dowloaded/file/imageName.png'

Что происходит в вашей ситуации

Вы смешиваете два метода.Изображения не были сохранены на вашем устройстве, когда вы работаете в разработке.В настоящее время они подаются на устройство от упаковщика.Таким образом, вы должны использовать метод require для доступа к ним.Они копируются, когда вы их используете (посмотрите журналы в вашем пакете, и вы увидите, что это происходит).

Когда вы создаете свою продукцию ipa или apk, все изображения и код объединяются вместедобавленные в приложение операторы require сообщают устройству, где искать изображения в этом комплекте.Если вы попытаетесь использовать путь к файлу после того, как он был объединен в ipa или apk, он не будет работать в процессе разработки, и вы получите похожую ошибку.

Есливы пытаетесь получить доступ к файлу, используя путь, подобный указанному ниже, он не будет работать, поскольку этого файла нет, потому что файл находится в комплекте.Лучше всего использовать метод require.

file:///Users/myname/Library/Developer/CoreSimulator/Devices/34AE8A68-E69D-4804-B3C4-96DE7A051B9B/data/Containers/Bundle/Application/C79368E9-3D1B-492C-B72B-9BF5C4D3262B/myApp.app/./Resources/MissingAlbumArt.png 

Следует также отметить, что iOS не может гарантировать, что пути к файлам останутся неизменными.Если вы запускаете react-native run-ios, хотя приложение перезагружается и на устройстве появляется только одно приложение, оно фактически может перемещать папки, поэтому всегда лучше динамически создавать ссылки на файлы, которые вы сохранили в любом каталоге на iOS.

Закуска

Вот закуска, которая показывает использование Images.js для хранения всех необходимых файлов.https://snack.expo.io/@andypandy/requiring-images

Вот структура каталогов, которая у меня есть в этом проекте

├── App.js
├── Images.js
├── README.md
├── app.json
├── assets
│   ├── bart.png
│   ├── lisa.png
│   ├── maggie.png
│   └── parents
│       ├── homer.jpg
│       └── marge.jpg
├── components
│   ├── AssetExample.js
│   └── SecondAssetExample.js
└── package.json

Вот как я строю операторы require в Images.js

export const MARGE = require('./assets/parents/marge.jpg');
export const HOMER = require('./assets/parents/homer.jpg');
export const BART = require('./assets/bart.png');
export const MAGGIE = require('./assets/maggie.png');
export const LISA = require('./assets/lisa.png');