React Native 图像替换为空白“文档”图像答案

【问题标题】：React Native image replaced with blank "document" imageReact Native 图像替换为空白“文档”图像
【发布时间】：2019-09-26 21:45:42
【问题描述】：

我刚刚升级到最新版本的 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 文件

编辑：它似乎与嵌套元素有关？

【问题讨论】：

标签： javascript css react-native

【解决方案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>

【讨论】：