Заполнение полей формы веб-страницы, открытой в веб-представлении с помощью React Native

Question

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

В настоящее время я использую WebBridgeView для открытия веб-страницы следующим образом: -

render() {
    return (
        <WebViewBridge
            ref="webviewbridge"
            onBridgeMessage={this.onBridgeMessage.bind(this)}
            source={{uri: "https://currencypin.com/PrepaidMeterPaymentsV2.0/cartwiz?c=IN&p=5&pm=tm"}}/>
    );
  }
}

Теперь я хочу, чтобы при открытии веб-страницы поля формы предварительно заполнены пользовательскими данными, которые у меня есть .Таким образом, единственное поле, которое пользователь должен заполнить на странице, это CAPTCHA.

Я следовал этой статье для достижения того же, но на самом деле предполагается, что веб-сайт настраивается.Что невозможно в моем случае, потому что оно принадлежит стороннему поставщику.

Каковы способы достижения этого?

Answer 1

Вы должны использовать injectedJavaScript опору из WebView.

Сначала объявите переменную jsCode:

const amount = 2
const jscode = `
  if (document.getElementById('txtAmount') == null) {
      // field not existing, deal with the error
    } else {
      document.getElementById('txtAmount').value = '${amount}';
    }
`

Обратите внимание на символ "` ".Используется для помещения переменных в строки.

Затем используйте его так:

<WebViewBridge
  ref="webviewbridge"
  onBridgeMessage={this.onBridgeMessage.bind(this)}
  injectedJavaScript={jsCode}