React Native Expo WebView 通信

Question

我正在开发一个需要与网络视图交互的应用程序。本质上我需要在 webview 中调用一个函数并捕获（以某种方式）它 returns.

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

这里是 child class.

的简化示例

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

这里是 parent class

的例子

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

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

如有任何帮助，我们将不胜感激。

Answer 1

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

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

然后您可以从父 class this.state.data

访问子 class 的状态

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

 ...

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

 ...

}

React Native Expo WebView 通信

React Native Expo WebView Communication

javascript

webview

react-native

expo