Question

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

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仍会显示，但Image不会。即使在AvatarHeader中，它实际上也是传递完全相同的图像URL。

（是的，我在主页上包含'Image'作为要求）

Answer 1

我也发现了使用react-native的一些奇怪的东西 - 意识到错误。

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

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

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

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

原因是导入图像时，尺寸随附。但是当你使用uri时，大小是不确定的。

真的很奇怪的反应原生图像问题

1 个答案: