Question

尝试在ReactNative的WebView中显示图像（使用Expo）。这样做可以缩放图像。

将webview与source = {{uri：this.state.imageUrl}}一起使用，这是一个s3存储桶映像位置。即-以.jpg结尾

我已经将有类似问题的人建议将blendContentMode设置为“ always”，并将javascriptEnabled和domStorage设置为true，将样式设置为flex：1等。

我的android仅显示白页，但是iOS可以很好地显示图像，因此url并不是问题。

我知道RN广告即将淘汰Webview并使用react-native-webview。但是当我们使用Expo时，这不是一个选择，因为要使用react-native-webview链接是必需的，而expo无法完成。

使用S3存储桶是否有我想念的东西，或者其他任何人有类似的问题他们已经设法解决了？不知道还有什么尝试，已经在应用程序的其他地方使用了带有Google驱动器前缀的技巧，以便在Web视图中显示PDF，但在这种情况下不起作用。而且使用mixedContentMode并不能解决任何问题。

<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，并插入了带有img标签的html标签，该标签引用了完全相同的图像url。这似乎工作得很好，并且可以解决直接引用图像时发生的所有问题。

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

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

React Native Webview-使用Expo-不显示s3存储桶中的图像

2 个答案: