ReactNative系列之十一原生RN控件WebView与Html5之件的调用

最新推荐文章于 2025-04-14 10:49:31 发布

为毛呀

最新推荐文章于 2025-04-14 10:49:31 发布

阅读量575

点赞数

分类专栏： android实战总结文章标签： ReactNative

android实战总结专栏收录该内容

44 篇文章 ¥9.90 ¥99.00

订阅专栏

本文介绍ReactNative 0.37后WebView的增强功能，无需第三方库即可实现与Html5的相互调用和数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言系列九讲解过使用第三方WebViewBridge与Html5之间的通信，但在ReatNative0.37之后，增强的WebView的功能，不需要第三方也可以原生支持互调与传递数据

2、主要代码

export default class Render extends Component {

  constructor(props) {
      super(props);
      this.state = {
        msgstr: "",
        title:"",
        simpleContent:"<!DOCTYPE html>\n<html></html>"
      };
    }

 onMessage(e)
 {
 	Alert.alert(e.nativeEvent.data);
 	//Alert.alert(this.state.simpleContent);

 	if (this.refs.webview)
 	{
 		this.refs.webview.postMessage("msg('"+e.nativeEvent.data+"')");
 	}
 	else
 	{
 		Alert.alert("error");
 	}
 }

  render () {
    //let display = this.state.showText ? this.state.strabc : ' ';
    
      return (
        <View style={styles.container}>
        <ScrollView 
        contentContainerStyle={styles.contentContainer}
        showsVerticalScrollIndicator={true}>

          <Text style={styles.hello}> {this.state.title} ,Welcome! </Text>
          
          <WebView
          ref='webview'
          onMessage={this.onMessage.bind(this)}
          automaticallyAdjustContentInsets={false}
          style={styles.webView}
          source={{ uri:'file:///android_asset/pages/nullpage.html'}}
          //injectedJavaScript={this.bootstrapJS()}
          injectedJavaScript="document.addEventListener('message', function(e) {eval(e.data);});"
          javaScriptEnabled={true}
          domStorageEnabled={true}
          decelerationRate="normal"
          startInLoadingState={true}
          scalesPageToFit={true}
        />
          </ScrollView>
        </View>
      )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 12,
    margin: 10,
  },
  contentContainer: {
      paddingVertical: 20
    },
    webView: {
      backgroundColor: BGWASH,
      height: 350,
    },
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <script>
      function onYeputi1015() {
        window.postMessage("Title: yeputi1015");
      }
      function msg(event) {
        document.write("event:"+event);
      }

    </script>
  <h1>Yeputi1015</h1>
  <button οnclick="onYeputi1015()">单击</button>
  </body>
</html>