Javascript 如何将变量传递到WebView的HTML中_Javascript_React Native

Javascript 如何将变量传递到WebView的HTML中

javascript react-native

Javascript 如何将变量传递到WebView的HTML中,javascript,react-native,Javascript,React Native,我试图将变量从state传递到React原生WebView的HTML中，但遇到了一些问题在WebView中使用URI而不是HTML时，我能够做到这一点： constructor (props) { super(props) this.state = { foo: props.navigation.getParam('foo', 'NO-FOO') } } render() { const url = 'http://example.com/R

我试图将变量从state传递到React原生WebView的HTML中，但遇到了一些问题

在WebView中使用URI而不是HTML时，我能够做到这一点：

constructor (props) {
    super(props)
    this.state = {
      foo: props.navigation.getParam('foo', 'NO-FOO')
    }
  }
  render() {
    const url = 'http://example.com/Results.aspx?entry=1&foo=' + this.state.foo + '&css=default'
    return (
      <WebView source={{ uri: url }} />
    );
  }

构造函数（道具）{
超级（道具）
此.state={
foo:props.navigation.getParam（'foo'，'NO-foo'））
}
}
render（）{
常量url=http://example.com/Results.aspx?entry=1&foo=“+this.state.foo+”&css=default”
返回(
);
}

当我尝试对HTML执行相同的操作时，如果条形码是硬编码的，则会起作用：

  render() {
    const html = '<html><head></head><body><script type="text/javascript" src="http://example.com/LaunchWidget.js?widget=Posting&css=default&foo=BAR&showheader=1></script></body></html>'
    return (
      <WebView source={{ html: html }} />
    );

render（）{
常量html=''
返回(
);

注意：本例中的条形图是一个7位数字

关闭脚本标记：

查看我的答案，谢谢@CarlosAbraham。我会研究一下注入JS是否能让我更接近，但我不确定当变量位于src URL而不是HTML中时，你的答案是否有效——如果我错了，请告诉我！实际上是@maximelanoi你的评论有帮助！我在发送src=I love SO时错过了结束引号！关闭脚本标签：

查看我的回答，谢谢@CarlosAbraham。我会研究注入JS是否能让我更接近，但我不确定当变量位于src URL而不是HTML中时，你的答案是否有效——让我确定一下现在如果我错了！事实上@Maximelauno是你的评论有帮助的！我在发送src=I love SO时错过了结束引号！

constructor (props) {
    super(props)
    this.state = {
      foo: props.navigation.getParam('foo', 'NO-FOO')
    }
    console.log('foo: ', this.state.foo); // this works as expected but the URL below does not work unless BAR is hard-coded
  }
  render() {
    const html = '<html><head></head><body><script type="text/javascript" src="http://example.com/LaunchWidget.js?widget=Posting&css=default&foo=' + this.state.foo + '&showheader=1></script></body></html>'
    return (
      <WebView source={{ html: html }} />
    );