Question

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

文档没有提到任何功能。解决方案是什么？

版本： react-native：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>

如何关闭React-Native Webview？

2 个答案: