如何关闭 React-Native Webview？

Question

我是 React Native 的新手，我有一个简单的应用程序，可以在按下按钮时打开一个 Webview。 如果导航状态发生变化，我想关闭 Webview。 我能够知道何时关闭它，但无法找到如何关闭它。

该文档没有提到任何功能来做到这一点。 对此有什么解决方案？

版本：反应本机：0.47.2

Answer 1

你可以在 Modal 中添加它

_onNavigationStateChange (webViewState) {
   this.hide()
}
show () {
  this.setState({ modalVisible: true })
}

hide () {
  this.setState({ modalVisible: false })
}

render () {
const { clientId, redirectUrl, scopes } = this.props
return (
  <Modal
    animationType={'slide'}
    visible={this.state.modalVisible}
    onRequestClose={this.hide.bind(this)}
    transparent
  >
    <View style={styles.modalWarp}>
      <View style={styles.contentWarp}>
        <WebView
          style={[{ flex: 1 }, this.props.styles]}
          source={{ uri: `http://google.com` }}
          scalesPageToFit
          startInLoadingState
          onNavigationStateChange={this._onNavigationStateChange.bind(this)}
          onError={this._onNavigationStateChange.bind(this)}
        />
        <TouchableOpacity onPress={this.hide.bind(this)} style={styles.btnStyle}>
          <Text style={styles.closeStyle}>close</Text>
        </TouchableOpacity>
      </View>
    </View>
  </Modal >

 )
}

Answer 2

对于想要自定义关闭按钮等的任何人，您也可以这样做。

<SafeAreaView style={{ flex: 1 }}>
  <TouchableOpacity onPress={closeWebView}>
    <Text>x</Text>
  </TouchableOpacity>
  <WebView style={{ flex: 1 }} source={{ uri }} />
</SafeAreaView>