如何在反应原生 WebView 中传递帖子参数？答案

【问题标题】：How do I pass post parameters in react native WebView?如何在反应原生 WebView 中传递帖子参数？
【发布时间】：2018-07-15 19:09:18
【问题描述】：

我想在我的应用程序中使用WebView 打开一个网址，以避免将用户从应用程序重定向到移动浏览器。但是，我要显示的网页需要一些帖子参数，例如来自帖子表单。如果是 GET 情况，我会简单地将参数附加到 url。

<WebView
    source={{uri: 'https://mypage.com/index.php', headers: '---', body: '---'}}
    style={{marginTop: 20}}
  />

我是将它们放在headers 还是body 中，以什么格式？还是有其他方法？我希望参数采用键值格式，即cat=himalayan&dog=pug&fish=shark

【问题讨论】：

标签： react-native webview

【解决方案1】：

我们可以通过两种方式在 webview 中进行表单发布

第一种方式：

const headerObj= { 'Content-Type': 'application/x-www-form-urlencoded'}
const postData = {
  key1: value1,
  key2: value2,
};
let urlEncodedData = '',
  urlEncodedDataPairs = [],
  key;
for (key in postData) {
  urlEncodedDataPairs.push(
    encodeURIComponent(key) + '=' + encodeURIComponent(postData[key]),
  );
}
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

<WebView
source={{uri: 'https://mypage.com/index.php', headers: headerObj, body: urlEncodedData, method:'POST'}}
style={{marginTop: 20}} />

第二种方式：使用Html

  <WebView
    source={{html: `<html> <body onload="document.forms[0].submit();">
                  <form method="post" action=${this.state.URL}>
                    <input type="hidden" name="key1"  value=${value1} >
                    <input type="hidden" name="key2" value=${tvalue2} >
                  </form >
                </body> </html>`,}}
  />

【讨论】：

【解决方案2】：

将这段代码放入正文中：

{ source: { uri: 'https://mypage.com/index.php', method: 'POST', body: 
'cat=himalayan&dog=pug&fish=shark' }

【讨论】：

它最初对我有用，但我不确定它现在在后端不起作用。

【解决方案3】：

你必须像这样在源属性中添加方法

<WebView
    source={{uri: 'https://mypage.com/index.php', headers: '---', body: '---',method:'POST'}}
    style={{marginTop: 20}}
  />

【讨论】：

Webview：使用 POST 时不支持`source.headers1。