1

Задача! Получаем относительную ссылку на картинку из пропсов в локальной папке, подставляем в контейнерный компонент < View > картинка из пропсов </ View >

Пробовал варианты:

  1. Стандартно компонент < Image source={require('')} /> вшивает картинку в приложение, но из пропсов не взять ссылку динамически;
  2. < Image source={ {uri : 'http://'} } /> - НЕ ГРУЗИТ из папки assets/, только из интернета;
  3. expo-pixi от гитхаб github.com/expo/expo-pixi - настроить не получается, ни по примеру, ни по видео, единственному в интернете на ютубе! Никому, в этом мире, кроме меня, не потребовалось работать с картинками в реакт нативе! Да и грузить игровой движок для картинок - такое себе!

Есть что-то простое - типа библиотеки / компонента - для отображения простой .jpeg картинки? Чтоб проще чем графический движок expo-pixi? - в котором не разобраться сходу...

const Exercise = (props) => {

    return (
        <View style={styles.exercise}>

//////////Не берёт из source={{uri: props.img}}!///////
            <View style={styles.exercise__imgBlock}>
                <Image style={styles.exercise__img} 
                    source={{uri: props.img}} />

////// Или это тоже никак нее работает!/////////
////// Ни по http://, ни по локальным ссылкам /////

                {/* <GLView
                    style={{ flex: 1,  width: '100%', height: '100%' }}
                    onContextCreate={async (context) => {
                        const app = new PIXI.application({ context });
                        const sprite = await PIXI.spriteAsync ( 
                            'https://el-dent.ru/UserFiles/Image/img2484_21094_big.jpg'
                        );
                        
                        app.stage.addChild(sprite);
                    }}
                /> */}
            </View>
            
        </View>
    );
};

const styles = StyleSheet.create({
    exercise: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',

        marginBottom: 10,
        width: '100%',
    },
    exercise__block: {
        width: 30,
        height: 40,
        marginRight: 5,

        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
        borderRadius: 10,
    },

    exercise__imgBlock: {
        width: 120,
        height: 80,
        marginRight: 10,
        marginLeft: 20,
        backgroundColor: 'darkgrey',
        borderColor: '#FFC000',
        borderStyle: 'solid',
        borderWidth: 2,
    },
    exercise__img: {
        width: '100%',
        height: '100%',
        // width: 100,
        // height: 100,
        resizeMode: 'contain'
    },

});

4
  • 1
    stackoverflow.com/questions/38887193/… Возможно поможет
    – Hat
    Commented 14 апр. 2022 в 14:11
  • Спасибо Hat. Те варианты продумал, 1 даже подходит для крайнего случая (все картинки в константы с require()). Но все картинки, а их до 1000, будут храниться в оперативной памяти в этих переменных/объектах. Это слишком сильная утечка памяти. Если ещё не придётся создавать отдельный компонент для каждой картинки - это будет совсем ( | )! Commented 14 апр. 2022 в 14:28
  • А может вам их закинуть тогда на хостинг какой-нибудь бесплатный? Мне кажется, 1000 картинок в assets это перебор. Они же получается всё равно хранятся в памяти телефона?
    – Hat
    Commented 14 апр. 2022 в 14:58
  • Но они хранятся не в оперативной, а на флешке. Но уже решилось с require() - ответ ниже. Он не загружает в оперативу, как я думал, а индексирует номер в папке assets/, что уже хорошо! Commented 14 апр. 2022 в 15:58

1 ответ 1

0

Вы сначала должны сделать require файла, который лежит в папке assets.

Никакой утечки памяти не происходит.

Выполните:

let logo = require( './assets/logo.png' );
console.log( typeof logo );

Для web сборки это будет string - путь к файлу, для android - number, то есть номер ассета.

Для нескольких тысяч файлов пройдите все файлы в папке в цикле.

2
  • Точно! Я думал, что: require() - это функ-я nodejs, которая эту картинку держит в памяти и тормозит запуск приложения. А картинки вызываются/открываются по мере рендера компоненты по номеру... надеюсь правильно понял! Сработало даже source={11} - без пропса и require()! Просто, потому что картинки лежат в папке и индексируются автоматом! Это решило задачу добавления картинки. Спасибо! Commented 14 апр. 2022 в 15:55
  • По строке и числу не стоит обращаться, потому что нет гарантии, что при следующей сборке ресурсы получат те же идентификаторы.
    – ReinRaus
    Commented 14 апр. 2022 в 16:39

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.