非常奇怪的反应原生图像问题答案

【问题标题】：Really wierd react-native image issue非常奇怪的反应原生图像问题
【发布时间】：2016-03-07 16:09:49
【问题描述】：

我有一个头像组件... 哪个返回这个...

return (
    <View style={{flex:1, alignItems:'center',marginTop:-10}}>
        <Image source={{uri: this.state.avatar}} />
        <Text style={styles.profileHeader}>
            {this.state.username} 
        </Text>
    </View>
    )

然后我通过将用户名和头像作为道具传递来使用此头像。这工作正常...

   return (
        <View>
          <AvatarHeader   username={d.test_username} avatar={d.test_avatar} />
        </View>     
    );

现在是奇怪的部分。如果我这样做......

   return (
        <View>
          <Image source={{uri: d.test_avatar}}  />
          <AvatarHeader   username={d.test_username} avatar={d.test_avatar} />
        </View>     
    );

图片不显示。 AvatarHeader 仍然显示，但图像不会。即使在 AvatarHeader 中，它实际上与传递的图像 URL 完全相同。

（是的，我在主页上包含“图片”作为要求）

【问题讨论】：

在组件中你的意思是：this.props.avatar 而不是这个this.state.avatar，对吧？
是的，你是对的。不过，这只是一个错字。它在代码中的道具......但我最终通过在图像中添加 style={{width:50, height:50}} 解决了这个问题。然后它起作用了。奇怪的是，我不需要在 AvatarHeader Image 标签上设置样式，而在 Image 上需要它。也不是很明白为什么。可能与 AvatarHeader 视图中的 flex:1 有关。并且图像被包裹在没有样式的视图中？

标签： javascript image react-native

【解决方案1】：

使用 react-native 我也发现了一些奇怪的东西 - 意识到出了什么问题。

当您将图像作为文件导入时，图像将显示没有问题（无需设置其大小）例如：

<Image source = {require('./img.jpeg')}/>

但是，如果您从 uri 设置图像源，则除非您在样式表上设置图像大小，否则图像将不会显示。

<Image source = {{uri: this.state.uri}}/>

原因是图片在导入的时候自带大小。但是当你使用 uri 时，大小是未定义的。

【讨论】：