1

所以我试图显示一个具有动态 uri/path 的图像（在初始化时它显示一个占位符图像，然后稍后更改），如下所示：

<Image source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

wherethis.state.pickedImage初始化为null，然后使用react-native-image-picker's进行更改launchCamera，launchImageLibrary如下所示：

cameraHandler = () => {
    ImagePicker.launchCamera({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
        if (res.didCancel) {
            console.log("User cancelled!");
        } else if (res.error) {
            console.log("Error", res.error);
        } else {
            this.setState({
                pickedImage:  res.uri,
                imageSize: res.fileSize,
            });
        }
    });
}};

（我应该提到我launchImageLibrary以完全相同的方式实现，所以我真的没有理由把它放在这里。）

虽然占位符图像显示得很好，但每当我上传新图像时，<Image/>它似乎根本没有渲染，我只剩下一个背景。

我试过的：

我试过做一些类似初始化this.state.pickedImage的事情state：

pickedImage: require('./Placeholder.jpeg').uri

然后添加图像标签，如：

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

但唉，这最终阻止了我渲染任何图像。

我考虑过将路径动态绑定到require()喜欢这里（以及这个网站上的许多地方），但据我所知，你需要事先知道你可能想要的潜在图像，如果我正在使用相机，我真的做不到。（另外，我不能预先设置一个列表并导出用户手机上的每张图片，所以我的手被绑在那里。）（显然，没有办法像我一样真正动态地绑定到 require()正在寻找，因为包管理器不是那样工作的）

有什么办法可以渲染这些uris吗？任何帮助表示赞赏！

（我正在使用 react-native 0.57.4 btw）

4

3 回答 3

1

原来解决方案非常愚蠢，但我所要做的就是为标签设置宽度和高度，例如：

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

我最初忽略了这个解决方案，因为我做了类似的事情：

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

它当时不起作用，但现在它起作用了。我不知道为什么，但它现在可以工作了。如果有人知道为什么，我会非常感激知道为什么。

于 2018-11-09T08:37:02.017 回答
0

您使用的是哪个“react-native”版本？它不适用于所有平台？require('./image.jpg')应该可以工作，也许你的URI有问题。或尝试加载Image.resolveAssetSource(source);

于 2018-11-08T11:08:12.333 回答
0

我觉得你res.uri的不行。

在我的项目中，我从我的画廊加载图像res.node.image.uri，如下所示：

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />
于 2018-11-08T11:19:02.023 回答