react-native-webview: как установить начальный масштаб для загруженного веб-сайта

#react-native #expo #react-native-webview

#react-native #expo #react-native-webview

Вопрос:

Я использую react-native-webview, чтобы мои пользователи переходили на страницу оплаты. Проблема в том, что содержимое платежной веб-страницы маленькое, крошечное в центре экрана. Пользователь должен использовать свои пальцы, чтобы увеличить масштаб, прежде чем начать использовать форму. Мне интересно, можно ли установить начальный уровень масштабирования для загруженного содержимого.

Вот мой код (прямо вперед):

 <WebView
  source={{ uri: redirectUrl }}
/>
 

Я рассмотрел много похожих проблем в Интернете, играл с разными флагами (например, scalesPageToFit), но безуспешно.

Комментарии:

1. Должны ли мы предположить, что вы контролируете только код приложения, а не код веб-страницы?

2. да, нет контроля над кодом веб-страницы. Это защищенная платежная страница. Мне удалось «почти» исправить это на Android с помощью scalesPageToFit={false}. Но на ios я по-прежнему получаю крошечный контент

Ответ №1:

Вы можете использовать injectedJavaScript из React Native WebView

 injectedJavaScript={`
const meta = document.createElement('meta'); 
meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'); 
meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `
}