React Native Webview - With Expo - Не отображаются изображения из корзины s3 - PullRequest
Новая
       22

React Native Webview - With Expo - Не отображаются изображения из корзины s3

0 голосов
/ 15 апреля 2019

Попытка отобразить изображение в WebView в ReactNative (Using Expo).Делая это, чтобы разрешить масштабирование изображения.

Использование веб-просмотра с source = {{uri: this.state.imageUrl}}, который является местоположением образа корзины s3.ie-- заканчивающийся на .jpg

Я установил mixedContentMode на «всегда», как это предлагают люди с похожими проблемами, наряду с установкой javascriptEnabled и domStorage на true, установкой стиля для flex: 1 и т. д. и т. д.

Мой андроид отображает только белую страницу, но iOS отображает изображение просто отлично, поэтому URL не проблема.

Я знаю, что RN объявляет о Webview как о том, что он скоро будет объявлен устаревшим и будет использовать реактив-native-webview.Но так как мы используем Expo, это не вариант, так как для использования ссылки требуется использование response-native-webview, чего нельзя сделать с помощью expo.

Есть ли что-то, что я пропустил с корзинами s3, или у кого-то еще была похожая проблема, которой удалось решить эту проблему?Не уверен, что еще попробовать, использовал трюк с префиксом Google Drive в другом месте в приложении для отображения PDF-файлов в веб-просмотре, но это не работает в этом случае.И использование mixedContentMode ничего не решило. 

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

, а примером URL-адреса изображения является 'https://example -uploads.s3.ap-southeast-2.amazonaws.com / uploads / users/ap-southeast-2:example/public/image-hd-1.jpg'

только показ формата ... выше URL не будет работать

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Вы пытались обернуть это в поле зрения?Потому что в одном из моих старых проектов я решил это так: 

 <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>

Вот закуска Ссылка

0 голосов
/ 15 апреля 2019

В конце я просто использовал WebView и вставил свой собственный html с тегом img, который ссылается на точно такой же URL-адрес изображения. Кажется, что это работает просто отлично и позволяет обойти проблему, связанную с прямой ссылкой на изображение.

Хотелось бы узнать, справился ли кто-нибудь с этим без необходимости выполнять разные операции рендеринга для разных операционных систем.

...