React native 使用JavaScript调用WebView内部的函数

我一直在寻找JavaScript的例子。在GitHub上，我发现了一些，我想是为了测试，它们是：

injectJavaScript={()=>'alert("Injected JS ")'}

但我不能让它工作。我想也许我必须等待WebView被加载，但仍然没有运气

以下是我的测试：

export default class App extends React.Component {
  constructor( props ){
    super( props );

    this.state = {
      loaded: false
    };
  }
  webviewDidLoad(){
    this.setState({loaded: true});
  }
  render() {
    return (
      <WebView
        source={ webview }
        injectJavaScript={ this.state.loaded ? ()=>'alert("Injected JS")' : null }
        onLoadEnd={ this.webviewDidLoad.bind(this) }
      />
    );
  }
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：false
};
}
webviewDidLoad（）{
this.setState（{loaded:true}）；
}
render（）{
返回(
'警报（“注入JS”）'：null}
onLoadEnd={this.webviewDidLoad.bind（this）}
/>
);
}
}

是通过字符串和道具与WebView通信的唯一方式吗？无法与传递本机javascript对象的WebView方法通信

谢谢你的帮助

import React，{Component}来自'React'；
import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  WebView,
} from 'react-native';

let jsCode = `
    document.querySelector('#myContent').style.backgroundColor = 'blue';
`;

export default class App extends Component {
  render() {
    return (
      <View style={localStyles.viroContainer}>

        <WebView
          source={{ html: "<h1 id='myContent'>Hello</h1>" }}
          style={{ flex: 1 }}
          ref={webview => {this.myWebview = webview;}} 
          injectedJavaScript={jsCode}
          javaScriptEnabled={true}
        />

        <TouchableHighlight
          style={localStyles.overlayButton}
          onPress={this.sendMessageToWebView2}
          underlayColor="transparent">
          <Text>Send message to WebView</Text>
        </TouchableHighlight>

      </View>
    );
  }

  sendMessageToWebView2 = () => {
    console.log(this.myWebview);
       console.log(this);
    this.myWebview.injectJavaScript(`
            (function () {
             document.querySelector('body').style.backgroundColor = 'orange';
            })();
        `);
  };
}

var localStyles = StyleSheet.create({
  viroContainer: {
    flex: 1,
  },
  overlayButton: {
    position: 'absolute',
    bottom: 0,
    left: 110,
    height: 50,
    width: 150,
    paddingTop: 30,
    paddingBottom: 30,
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: '#f0a0aa',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#000',
  },
});

进口{
文本，
看法
样式表，
触控高光，
网络视图，
}从“反应本机”；
让jsCode=`
document.querySelector（“#myContent”）.style.backgroundColor='blue'；
`;
导出默认类应用程序扩展组件{
render（）{
返回(
{this.myWebview=webview；}}
injectedJavaScript={jsCode}
javaScriptEnabled={true}
/>
向WebView发送消息
);
}
sendMessageToWebView2=（）=>{
log（this.myWebview）；
console.log（this）；
this.myWebview.javascript(`
（功能（）{
document.querySelector（'body'）.style.backgroundColor='orange'；
})();
`);
};
}
var localStyles=StyleSheet.create({
病毒携带者：{
弹性：1，
},
覆盖按钮：{
位置：'绝对'，
底部：0，
左：110，
身高：50，
宽度：150，
paddingTop:30，
填充底部：30，
玛金托普：10，
marginBottom:10，
背景颜色：“#f0a0aa”，
边界半径：10，
边界宽度：2，
边框颜色：“#000”，
},
});

您使用了

injectedJavascript

属性，而不是

injectJavascript

。这意味着它只运行一次。是的，我知道。在创建webview时，它会执行一次。当我点击按钮时，它会在你每次点击时执行一次。我编辑了sendMessageToWebView2函数，因为在此期间，我设法让它最终为我工作。我很高兴。在Expo中尝试了它，但它有点崩溃：所以injectJavaScript实际上是一个方法，而不是一个属性，对吗？哎呀，我使用这个webview导入：从“react native webview messaging/webview”导入{webview}；我明天会设法调查的，因为现在很晚了