Изображения в компоненте react native

#reactjs #react-native #npm

#reactjs #react-native #npm

Вопрос:

Я создал компонент react native и упаковал его для npm следующим образом:

https://www.freecodecamp.org/news/how-to-publish-a-react-native-component-to-npm-its-easier-than-you-think-51f6ae1ef850/

После этого я создал новое приложение react native и установил свой новый компонент, используя npm pack и npm i …

Однако каждый раз, когда я использую изображение из этого компонента, используя

     const myImg = require(imagesFolder   'Happy.jpg')
    const caller = this.props.caller;


 return(
    <View style={{height: '100%', alignItems: 'center', backgroundColor: '#ffc600'}}>

            <Text></Text>

            <Image source={myImg}
                style={{width:150, height:150, borderWidth: 1, borderColor: 'red', resizeMode: 'contain'}}            
            />

            <Text></Text>
 

Я не вижу изображения, и компилятор не сообщает, что он не смог найти изображение. Есть идеи? Есть ли специальное место для файлов изображений, которые необходимо разместить?

Спасибо

Ответ №1:

Попробуйте

     <Image
      source={myImg}
      style={{ height: 350, width: WIDTH }}
      resizeMethod="resize"
      resizeMode="contain"
    />
 

Ответ №2:

 <Image
    style={styles.tinyLogo}
    source={require('@expo/snack-static/react-native-logo.png')}
 

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

Комментарии:

1. Что ж, это очень интересный вариант…. однако мы не используем Expo!!

2. Это всего лишь пример. Вы можете получить доступ к изображению. Компонент не изменяется. Вам просто нужно добавить путь к изображению.