Задача! Получаем относительную ссылку на картинку из пропсов в локальной папке, подставляем в контейнерный компонент < 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'
},
});