使用 React Native 填充在 Web 视图中打开的网页的表单字段

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。

我关注this article 是为了达到同样的目的，但它实际上假设该网站是可定制的。在我的情况下这是不可能的，因为它属于第 3 方供应商。

有什么方法可以做到这一点？

Answer 1

您必须使用来自WebView 的injectedJavaScript 属性。

首先声明一个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}