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

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

2 голосов
/ 22 июня 2019

В настоящее время я пытаюсь настроить изображение внутри 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"
  }
};

Я получаю красный фон, чтобы заполнить весь экран, но изображение не.

Ответы [ 2 ]

1 голос
/ 22 июня 2019

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

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

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

1 голос
/ 22 июня 2019

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

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

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

если нет; 

button: {
   width: 100,
   height: 100
}

или 

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

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

...