React Native 向 WebView 发送数据答案

【问题标题】：React Native send data to WebViewReact Native 向 WebView 发送数据
【发布时间】：2020-09-15 00:00:42
【问题描述】：

我正在使用 react-native-webview 在我的 react-native 屏幕中呈现 HTML 屏幕。它会生成一个小表格来从我的 Braintree 帐户中添加或选择信用卡。下面的代码运行良好，console.log(data) 打印出我想要从 Braintree 获得的响应。 但它可以工作，因为 client_token 在我的 HTML 文件中是硬编码的。所以我唯一要做的就是传递client_token。

我的 react-native 代码（不传递令牌）：

const BraintreeWebview = () => {
   let myWebView
   const url = 'amazonaws.com/braintree-webview/test2.html'
   const myScript = `
     document.body.style.backgroundColor = '#f4f4f4';
     true; // note: this is required, or you'll sometimes get silent failures
`
return (
  <WebView
    source={{ uri: url }}
    style={{ flex: 1, marginTop: 10, width: variable.deviceWidth * 0.95 }}
    injectedJavaScript={myScript}
    onMessage={(event) => {
      const { data } = event.nativeEvent
      console.log(data)
    }}
  />
)

还有我的 HTML（不传递令牌）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
  </head>
  <body>
    <div id="dropin-container"></div>
    <div id="braintree_token"></div>
    <button id="submit-button">Request payment method</button>
    <script>
      var button = document.querySelector('#submit-button');

      braintree.dropin.create({
        authorization: "eyJ2ZXJzaW9uIjoyLCJlbnZpcm9ubWVudCI6InNhbmRib3giLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU9UQTJPVEUwTmpnc0ltcDBhU0k2SWpNMllUTmhZemRtTFRJd1l6UXRORE15TVMxaE1tTTNMVGcxTjJGbVl6RTBZMkUwWmlJc0luTjFZaUk2SW1oMFoyTTVaR1k1WkhwME56ZHViV29pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNkltaDBaMk01WkdZNVpIcDBOemR1YldvaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKamRYTjBiMjFsY2w5cFpDSTZJak0xSW4xOS5JWWVKdmVINDFOVUZFb0FaRUNGelVBZ2VuM0RUVHhvMmM1azAtckdiNEw4N0ZiUmxITS1nUlZreXQtYmhnTzZXajBsTzRTNnltRXEwcVVOalNicEtSQT9jdXN0b21lcl9pZD0iLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJoYXNDdXN0b21lciI6dHJ1ZSwiZ3JhcGhRTCI6eyJ1cmwiOiJodHRwczovL3BheW1lbnRzLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vZ3JhcGhxbCIsImRhdGUiOiIyMDE4LTA1LTA4In0sImNoYWxsZW5nZXMiOltdLCJjbGllbnRBcGlVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpIiwiYXNzZXRzVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhdXRoVXJsIjoiaHR0cHM6Ly9hdXRoLnZlbm1vLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhbmFseXRpY3MiOnsidXJsIjoiaHR0cHM6Ly9vcmlnaW4tYW5hbHl0aWNzLXNhbmQuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbS9odGdjOWRmOWR6dDc3bm1qIn0sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsInBheXBhbEVuYWJsZWQiOnRydWUsInBheXBhbCI6eyJkaXNwbGF5TmFtZSI6ImNvZGVib3h4IiwiY2xpZW50SWQiOm51bGwsInByaXZhY3lVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vcHAiLCJ1c2VyQWdyZWVtZW50VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3RvcyIsImJhc2VVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFzc2V0c1VybCI6Imh0dHBzOi8vY2hlY2tvdXQucGF5cGFsLmNvbSIsImRpcmVjdEJhc2VVcmwiOm51bGwsImFsbG93SHR0cCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOnRydWUsImVudmlyb25tZW50Ijoib2ZmbGluZSIsInVudmV0dGVkTWVyY2hhbnQiOmZhbHNlLCJicmFpbnRyZWVDbGllbnRJZCI6Im1hc3RlcmNsaWVudDMiLCJiaWxsaW5nQWdyZWVtZW50c0VuYWJsZWQiOnRydWUsIm1lcmNoYW50QWNjb3VudElkIjoiY29kZWJveHgiLCJjdXJyZW5jeUlzb0NvZGUiOiJDQUQifSwibWVyY2hhbnRJZCI6Imh0Z2M5ZGY5ZHp0NzdubWoiLCJ2ZW5tbyI6Im9mZiJ9",
        container: '#dropin-container'
      }, function (createErr, instance) {
        
        button.addEventListener('click', function () {
          instance.requestPaymentMethod(function (err, payload) {
            if(err){
              window.ReactNativeWebView.postMessage(err)
            } else {
              window.ReactNativeWebView.postMessage(payload.nonce);
            }
          });
        });
      });
    </script>
  </body>
</html>

我尝试发送的 client_token 很大程度上来自 this documentation，但从未成功..

我现在的 react-native 代码：

const BraintreeWebview = () => {
let myWebView
const url = 'https://damava-documents.s3.us-east-2.amazonaws.com/braintree-webview/test2.html'
const myScript = `
  document.body.style.backgroundColor = '#f4f4f4';
  true; // note: this is required, or you'll sometimes get silent failures
`
return (
  <WebView
    source={{ uri: url }}
    ref={(el) => (myWebView = el)}
    style={{ flex: 1, marginTop: 10, width: variable.deviceWidth * 0.95, height: 50 }}
    injectedJavaScript={myScript}
    onMessage={(event) => {
      const { data } = event.nativeEvent
      const clientResponseCode = `
      window.postMessage("client_token");
      true;`
      if (myWebView) {
        myWebView.injectJavaScript(clientResponseCode)
      }
      console.log(data)
    }}
  />
)

我现在的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
  </head>
  <body>
    <div id="dropin-container"></div>
    <div id="braintree_token"></div>
    <button id="submit-button">Request payment method</button>
    <script>
      var button = document.querySelector('#submit-button');

      window.addEventListener("message", message => {
      document.getElementById("braintree_token").innerHTML += `</br>${message.data}`;
      });

      braintree.dropin.create({
        authorization: "eyJ2ZXJzaW9uIjoyLCJlbnZpcm9ubWVudCI6InNhbmRib3giLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU9UQTJPVEUwTmpnc0ltcDBhU0k2SWpNMllUTmhZemRtTFRJd1l6UXRORE15TVMxaE1tTTNMVGcxTjJGbVl6RTBZMkUwWmlJc0luTjFZaUk2SW1oMFoyTTVaR1k1WkhwME56ZHViV29pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNkltaDBaMk01WkdZNVpIcDBOemR1YldvaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKamRYTjBiMjFsY2w5cFpDSTZJak0xSW4xOS5JWWVKdmVINDFOVUZFb0FaRUNGelVBZ2VuM0RUVHhvMmM1azAtckdiNEw4N0ZiUmxITS1nUlZreXQtYmhnTzZXajBsTzRTNnltRXEwcVVOalNicEtSQT9jdXN0b21lcl9pZD0iLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJoYXNDdXN0b21lciI6dHJ1ZSwiZ3JhcGhRTCI6eyJ1cmwiOiJodHRwczovL3BheW1lbnRzLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vZ3JhcGhxbCIsImRhdGUiOiIyMDE4LTA1LTA4In0sImNoYWxsZW5nZXMiOltdLCJjbGllbnRBcGlVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpIiwiYXNzZXRzVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhdXRoVXJsIjoiaHR0cHM6Ly9hdXRoLnZlbm1vLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhbmFseXRpY3MiOnsidXJsIjoiaHR0cHM6Ly9vcmlnaW4tYW5hbHl0aWNzLXNhbmQuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbS9odGdjOWRmOWR6dDc3bm1qIn0sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsInBheXBhbEVuYWJsZWQiOnRydWUsInBheXBhbCI6eyJkaXNwbGF5TmFtZSI6ImNvZGVib3h4IiwiY2xpZW50SWQiOm51bGwsInByaXZhY3lVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vcHAiLCJ1c2VyQWdyZWVtZW50VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3RvcyIsImJhc2VVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFzc2V0c1VybCI6Imh0dHBzOi8vY2hlY2tvdXQucGF5cGFsLmNvbSIsImRpcmVjdEJhc2VVcmwiOm51bGwsImFsbG93SHR0cCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOnRydWUsImVudmlyb25tZW50Ijoib2ZmbGluZSIsInVudmV0dGVkTWVyY2hhbnQiOmZhbHNlLCJicmFpbnRyZWVDbGllbnRJZCI6Im1hc3RlcmNsaWVudDMiLCJiaWxsaW5nQWdyZWVtZW50c0VuYWJsZWQiOnRydWUsIm1lcmNoYW50QWNjb3VudElkIjoiY29kZWJveHgiLCJjdXJyZW5jeUlzb0NvZGUiOiJDQUQifSwibWVyY2hhbnRJZCI6Imh0Z2M5ZGY5ZHp0NzdubWoiLCJ2ZW5tbyI6Im9mZiJ9",
        container: '#dropin-container'
      }, function (createErr, instance) {
        
        button.addEventListener('click', function () {
          instance.requestPaymentMethod(function (err, payload) {
            if(err){
              window.ReactNativeWebView.postMessage(err)
            } else {
              window.ReactNativeWebView.postMessage(payload.nonce);
            }
          });
        });
      });
    </script>
  </body>
</html>

有什么想法吗？

【问题讨论】：

您似乎发布了敏感/私人信息。请重置您的密码和/或撤销 API 密钥和令牌，因为它们在互联网上发布时被视为已泄露。如果发布了个人身份信息，请edit 删除信息，然后标记您的帖子以供版主编辑修订。

标签： javascript html reactjs react-native webview

【解决方案1】：

请尝试将 window.addEventListener 更改为 document.addEventListener 并使用 WebView 的 WebView ref 和 onLoadEnd 属性发送 client_token

onLoadEnd={() => myWebView.postMessage("client_token");}

注意：关注本文以获得更多指导https://dev.to/franko4don/paypal-in-react-native-4emd

【讨论】：

谢谢先生，非常感谢您的回答！现在我必须使用这个变量。我想我需要设置一个超时或其他东西，因为现在我在收到它时设置了变量 clientToken 但表单没有加载..