Question

我只想在单击WebView外部的按钮后将WebView组件的源更改为其他网址。我很震惊，没有比这更简单的方法了。有人告诉我使用'refs'，但考虑到我的独特情况，我什至不确定它是否可以工作。

为了传达我的期望，我正在混合一些Web js。

doAppNotification() {
    // some objc code is run
    // receiveAppNotification is called
}

receiveAppNotification() {
    let wv = document.getElementById("webview"); // !! how can I do something like this in react native??
    wv.source="http://some.other.site";
}

...

<Webview 
  id="webview"
  source={{uri: "https://www.google.com"}} 
/>
<Button
  onClick={doAppNotification}
/>

Answer 1

您可以轻松地使用组件状态来实现所需的行为。更改状态将触发组件重新渲染，并打开您设置的新uri。

export default MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: 'https://defaulturl'
    }
  }

  someEvent = (e) => {
    this.setState({ url: 'https://toanewurl' });
  }

  render(){
    const { url } = this.state;
    return(
      <React.Fragment>
        <WebView source={{uri: url}} />
        <Button onClick={this.someEvent} />
      </React.Fragment>
    )
  }
}

点击按钮后对本地更改Webview源做出反应

1 个答案: