React Native Webview - 与 Expo - 不显示来自 s3 存储桶的图像

Question

尝试在 ReactNative 中的 WebView 中显示图像（使用 Expo）。这样做是为了允许图像缩放。

使用带有 source={{ uri: this.state.imageUrl }} 的 webview，这是一个 s3 存储桶图像位置。即——以.jpg结尾

按照有类似问题的人的建议，我已将混合内容模式设置为“始终”，并将 javascriptEnabled 和 domStorage 设置为 true，将样式设置为 flex:1 等。

我的 android 只显示一个白页，但 iOS 显示图像很好，所以 url 不是问题。

我知道 RN 宣传 Webview 即将被弃用并使用 react-native-webview。但是当我们使用 Expo 时，这不是一个选项，因为使用 react-native-webview 需要链接，而这不能通过 expo 完成。

我在使用 s3 存储桶时是否遗漏了什么，或者是否有其他人遇到过类似的问题，他们已经设法解决了这个问题？不知道还能尝试什么，在应用程序的其他地方使用了带有 google drive 前缀的技巧来在 webview 中显示 PDF，但在这种情况下不起作用。并且使用混合内容模式并没有解决任何问题。

<WebView
                  source={{ uri: this.props.map.source }}
                    startInLoadingState
                    javaScriptEnabled
                    style={{ flex: 1}}
                    scalesPageToFit
                    javaScriptEnabled
                    domStorageEnabled
                    originWhitelist={['*']}
                    mixedContentMode='always'
                />

图片网址的例子是'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'

只显示格式..上面的网址不起作用

Answer 1

最后，我只使用了 WebView 并插入了我自己的 html 和一个引用完全相同的图像 url 的 img 标签。这似乎工作得很好，并且解决了直接引用图像时发生的任何问题。

仍然想知道是否有人已经解决了这个问题，而不必为不同的操作系统执行不同的渲染。

Answer 2

您是否尝试将其包裹在视图中？因为在我的一个旧项目中，我是这样解决的

 <View style={{flex:1}}>

        <View  style={{height:'100%',width:'100%'}}>
            <WebView

              source={{ uri: 'https://github.com/facebook/react-native' }}
              scalesPageToFit={true}
               startInLoadingState={true}
                    javaScriptEnabled={true}

                    domStorageEnabled={true}
                    originWhitelist={['*']}
                    mixedContentMode='always'
            />

        </View>
   </View>

这是点心Link