# react-native html桥接

**Repository Path**: Cyptt/react-native-html-bridge

## Basic Information

- **Project Name**: react-native html桥接
- **Description**: ---------------------
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/Cyptt/react-native-html-bridge
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-10
- **Last Updated**: 2022-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-native html桥接

1.项目中导入第三方插件react-native-webview
2.react-native 端使用

```

export default class App extends Component{

  render(){
    return (
        <WebView style={{top:0}}
                 source={{uri:"你的h5地址"}}
                 onMessage={this.handleMessage}
                 injectedJavaScript={
                   `(function() {window.postMessage1 = function(data) {window.ReactNativeWebView.postMessage(data)}})();`}
        >
        </WebView>
    );
  }

//拿到html回调
  handleMessage = async ({nativeEvent}) => {
    Alert.alert("进来了")
    console.log("----",nativeEvent)
  }
};


``

3.html 方法

发送回调

```
 let map = {"name":"zs"}
 window.postMessage1(map)

```