Изображение React Native заменено на пустое изображение документа

Question

Я только что обновил до последней версии XCode, и я заметил, что некоторые из моих изображений заменяются пустыми .. изображения документа?Это трудно описать, поэтому я включил картинку:

Для примера моей разметки:

<View style={[this.props.styles["card-nav-child-border"]]}>
    <TouchableOpacity onPress={this.handleCallClick} style={[this.state.cardnavview]}>
        <Text style={this.props.styles["card-nav-text"]}>
            {CallText}{" "}
            <Image style={this.props.styles["card-nav-image"]} source={Call} />
        </Text>
    </TouchableOpacity>

Имои стили:

.card-nav-image {
  width: 10;
  height:10;
}
.card-nav-child {
  justify-content: space-around;
  flex-direction: row;
  width: 250;
}
.card-nav-child-border {
  border-color: #fff;
  border-style: solid;
  border-right-width: 1;
  padding-right: 10;
  padding-top: 5;
  padding-left: 10;
}
.card-nav-child-border-end {
  padding-top: 5;
  padding-right: 10;
  padding-top: 5;
  padding-left: 10;

}

Я подумал, что это может быть размер, но я попытался искусственно увеличить размер, чтобы проверить, и не повезло.

Когда я удалил несколько случайных стилейиногда возвращается назад.

Я очень смущен этим поведением, и это трудно для Google, так как я не совсем уверен, как его описать.

Я надеюсь, что кто-то, кто имелОпыт работы с этим может дать некоторую информацию о том, почему это происходит.

Если это помогает, рассматриваемые изображения являются файлами png

РЕДАКТИРОВАТЬ: Похоже, это связано с вложенными элементами?

Answer 1

Не уверен, что это самый «React Native» способ исправить эту проблему, или почему эта проблема возникла в целом, но исправление было таким:

<TouchableOpacity onPress={this.handleCallClick} style={[this.state.cardnavview]}>
    <View style={{ flexDirection: "row" }}>
        <Text style={this.props.styles["card-nav-text"]}>
            {CallText}{" "}
        </Text>
        <Image style={this.props.styles["card-nav-image"]} source={Call} />
    </View>
</TouchableOpacity>