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

#react-native #amazon-s3 #webview #expo

Вопрос:

Попытка отобразить изображение в WebView в ReactNative (с использованием Expo). Это делается для разрешения масштабирования изображения.

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

Я установил для mixedContentMode значение «всегда», как это предлагают люди с аналогичными проблемами, а также установил javascriptEnabled и DOMStorage в true, установив style в flex: 1 и т.д. И т.п.

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

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

Есть ли что-то, что я пропустил с корзинами s3, или у кого-нибудь еще была подобная проблема, и им удалось решить эту проблему? Не уверен, что еще можно попробовать, использовал трюк с префиксом google Drive в другом месте приложения для отображения PDF-файлов в webview, но в данном случае это не работает. И использование 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-адреса format .. above не будет работать

1. Можете ли вы поделиться каким-нибудь кодом?

2. конечно, поделиться особо нечем, но я добавлю это в основной пост. Это всего лишь используемый компонент WebView. Добавление mixedContentMode должно было работать для Android из того, что я прочитал. Изображение отлично отображается на iOS

Ответ №1:

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

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

Ответ №2:

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

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

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