时间戳

首页 > 解决方案 > 使用 React Native 填充在 Web 视图中打开的网页的表单字段

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

问题描述

我正在开发一个项目，其中包含一个有助于充电的模块，所以发生的情况是用户的数据已经保存在应用程序中，当他们选择充电时，应用程序会在 Web 视图中打开此网页。

目前，我正在使用 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。

我正在关注这篇文章以实现相同的目标，但它实际上假设该网站是可定制的。在我的情况下这是不可能的，因为它属于第 3 方供应商。

有什么方法可以实现这一目标？

标签： react-nativewebview

解决方案

您必须使用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}

推荐阅读