React Native Expo WebView 通信答案

【问题标题】：React Native Expo WebView CommunicationReact Native Expo WebView 通信
【发布时间】：2018-09-19 17:12:12
【问题描述】：

我正在开发一个需要与 web 视图交互的应用程序。本质上，我需要在 webview 中调用一个函数并捕获（以某种方式）它返回的内容。

本质上父类有一个按钮。此按钮触发子类中调用的函数，该函数向 webview 发送消息。然后，webview 会发回一条消息，触发onMessage() 函数。所以我的问题基本上是，父函数testFunc()如何访问webview返回的数据。

这是子类的简化示例。

export default class Child extends Component {
  sendMessageToWebView = () => {
    this.webview.postMessage("Hello WebView, from React Native");
  }

  html = () => {
    `<body>
     <script>
       document.addEventListener("message", function(data) {
         console.log(data);
         window.postMessage("Hello from WebView :)");
       });
     </script>
    </body>`
  }

  onMessage = (data) => {
    console.log(data.nativeEvent.data);
    return data.nativeEvent.data;
  }


  render() {
    return (
      <View>
        <WebView
          ref={(view) => { this.webview = view; }}
          source={{ html() }}
          onMessage={this.onMessage}
        />
      </View>
    );
  }
}

这里是父类的例子

export default class Parent extends Component {
  testFunc = () => {
    this.child.sendMessageToWebView();
  }

  render() {
    return (
      <View>
         <Button onPress={this.testFunc} title={'Test'} />
         <Child ref={child => {this.child = child}} />
      </View>
    );
  }
}

我曾考虑过使用状态，但最终遇到了类似的问题。父函数如何知道子类中的状态何时发生变化。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript react-native webview expo

【解决方案1】：

您可以在收到数据后在子类中设置状态。然后我们可以在父类中调用一个函数sendData，用新数据更新该父类的状态。

export default class Child extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  ...

  onMessage = (data) => {
    const data = data.nativeEvent.data;
    this.setState({ data: data }, sendToParent);
  }

  sendToParent = () => {
    this.props.sendData(this.state.data);
  }
  ...

然后您可以从父类this.state.data访问子类的状态

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

 ...

 sendData = (data) => {
   this.setState({ data: data });
 }

 ...

}

【讨论】：

干得好！在工作中，我通常会编写超级可读的代码，但如果我正在处理个人项目，我会做类似的事情：sendData = data => this.setState({ data });