Question

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

基本上，父类具有一个按钮。该按钮触发在子类中调用的函数，该函数将消息发送到Webview。然后，Webview发送回一条消息，触发onMessage()函数。所以我的问题基本上是，父函数testFunc()如何访问Web视图返回的数据。

这是子类的简化示例。

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>
    );
  }
}

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

任何帮助将不胜感激。

Answer 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 });
 }

 ...

}

反应Native Expo WebView通信

1 个答案: