Изображение внутри TouchableOpacity не отображается

В настоящее время я пытаюсь настроить изображение внутри TouchableOpacity. Это не отображается, и я застрял на том, почему это так. Пожалуйста, дайте мне знать, если вы можете помочь. ТИА!

Я в основном скопировал это: https://facebook.github.io/react-native/docs/touchableopacity из официальной документации, но безрезультатно.

Думал, что, возможно, мой элемент TouchableOpacity не был полноэкранным, но это не так (когда я устанавливаю цвет фона, я вижу, что он заполняет экран).

<TouchableOpacity style={styles.button} onPress={this.onWaitingButtonPress.bind(this)}>
    <Image style={styles.imagestyle} source={{uri: "https://www.dollargeneral.com/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/0/0/00870101.jpg"}}/>
</TouchableOpacity>

const styles = {
  button: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "red"
  },
  imageStyle: {
    flex: 1,
    resizeMode: "contain"
  }
};

У меня красный фон заполняет весь экран, а изображение нет.


react-native image touchableopacity
person Lance Han    schedule 22.06.2019    source источник
comment
Можете ли вы объяснить немного больше, что не работает, изображение не отображается или событие клика не работает?   -  person Fahad Rehman    schedule 22.06.2019
comment
Привет - спасибо за ответ. Изображение не отображается, но событие клика работает.   -  person Lance Han    schedule 23.06.2019

Ответы (2)


arrow_upward
1
arrow_downward

flex: 1 покрывает всю ширину и высоту своего контейнера. вероятно, размеры вашего представления равны 0.

если ваш сенсорный экран отображается, попробуйте это;

imageStyle: {
   width: "100%",
   height: "100%"
}

если это не так;

button: {
   width: 100,
   height: 100
}

or,

button: {
   width: "100%,
   height: "100%"
}

поэтому вы можете понять разницу между ними, попробовав эти

person Orhan    schedule 22.06.2019
comment
Привет, спасибо Орхан за ваш ответ. Ни одно из предложенных вами решений не работает. Кроме того, изменение размера кнопки, похоже, также не влияет на изображение. Размер кнопки меняется, но это просто делает интерактивный элемент (например, TouchableOpacity) меньше, а изображение остается таким же незаметным, как обычно. - person Lance Han; 23.06.2019
comment
Я попробовал ваш код на snack.expo.io, и он отлично работает. Вы пробовали это на андроиде или ios? Возможно, вам нужно попробовать сбросить кэши с помощью npm start -- --reset-cache. Как я уже сказал, ваш код отлично работает на моей стороне, и то, что я написал в качестве примера, тоже работает. - person Orhan; 24.06.2019
comment
интересно .. Я сброшу кеш и вернусь к вам. Спасибо большое! Кроме того, я работаю в ios и пробовал только через симулятор. - person Lance Han; 24.06.2019
comment
Итак, я заставил его работать окольным странным образом. Я использовал элемент ‹ImageBackground› вместо элемента ‹Image›, и каким-то образом изображение начало отображаться... я был сбит с толку и пытался понять, почему, но никаких жалоб с моей стороны. Я прочитаю об этом больше и попытаюсь заставить его работать с ‹Image›. Спасибо! - person Lance Han; 24.06.2019
comment
элементы пользовательского интерфейса иногда можно спутать. рад помочь :) - person Orhan; 24.06.2019

arrow_upward
1
arrow_downward

Flex:1 в родительском элементе покрывает всю область, но flex1 в изображении покрывает только высоту всего экрана. Здесь ширина становится равной 0, так как по умолчанию направлением flex является столбец. Попробуйте установить некоторую ширину для изображения, например «100%» или любое другое значение.

Отредактировано после комментария:

Если это не работает, добавьте также ширину в touchableopacity.

person Piyush Abhishek Singh    schedule 22.06.2019
comment
Спасибо, Пиюш, за ответ. Изменение ширины изображения не работает. Я пробовал ширину: «100%» и любое другое значение 100, 200, 300 и т. д. - person Lance Han; 23.06.2019
comment
Попробуйте добавить немного ширины к Touchable Opacity. Кажется, что родитель сенсорной непрозрачности имеет flex как 1 и направление flex как столбец. - person Piyush Abhishek Singh; 23.06.2019
comment
Еще ничего. добавлено в различных количествах, как и раньше, со 100% и 100, 200, 800. По-прежнему ничего не отображается для изображения, даже с изменением ширины для TouchableOpacity и тегов изображения :( - person Lance Han; 24.06.2019
comment
Итак, я заставил его работать окольным странным образом. Я использовал элемент ‹ImageBackground› вместо элемента ‹Image›, и каким-то образом изображение начало отображаться... я был сбит с толку и пытался понять, почему, но никаких жалоб с моей стороны. Я прочитаю об этом больше и попытаюсь заставить его работать с ‹Image›. Спасибо! - person Lance Han; 24.06.2019