Как добавить картинку в react native? Есть ли библиотеки?

Question

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

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

Стандартно компонент < Image source={require('')} /> вшивает картинку в приложение, но из пропсов не взять ссылку динамически;
< Image source={ {uri : 'http://'} } /> - НЕ ГРУЗИТ из папки assets/, только из интернета;
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'
    },

});

Answer 1

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

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

Выполните:

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

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

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

БЛОГ НА HUSL

Как добавить картинку в react native? Есть ли библиотеки?

Ответы (1 шт):