在使用 BackHandler 退出 APP 之前，Expo App 中的 react-native webview 在 Android 上显示 'about:blank'

Question

大家好，

我有一个应用程序的问题，让我头疼了几天。该应用程序由一个包含 PHP WebShop 的 WebView 和一个条形码扫描仪组成。到目前为止一切都按预期工作。

为了在 Android 上更好地导航，我想使用 HardwareBackButton 返回 WebView 历史记录。这也很有效，但有一个主要缺陷。我希望后退按钮返回，直到它不能再返回，而应该退出应用程序。现在来看实际问题：最后一页 url 是 'about:blank' 并导致空白屏幕。从这里开始，canGoBack 状态为 false，应用程序按预期退出，但如果您再次打开应用程序，它仍处于 'about:blank' 状态。我的第一个解决方法是在 BackHandler.exitApp; 之前添加 this.WEBVIEW_REF.current.goForward();。这有助于在退出后让应用程序恢复到可导航状态，但我想完全摆脱黑屏。

我希望下面的代码足以理解我想要实现的目标：

componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

handleBackButton = () => {
    if (this.state.canGoBack) {
      this.WEBVIEW_REF.current.goBack();
      return true;
    }else{
      this.WEBVIEW_REF.current.goForward();
      BackHandler.exitApp;
    };
  }

render() {
    <View style={styles.container}>
        <CustomStatusBar backgroundColor="#ee7203" barStyle="light-content" />
          <View style={styles.main}>
            <WebView
              onLoad={() => this.hideSpinner()}
              cacheEnabled={false}
              source={{
                uri: this.state.webshopURL,
              }}
              ref={this.WEBVIEW_REF}              
              onNavigationStateChange={(navState) => {
                console.log(navState);
                this.setState({
                  canGoBack: navState.canGoBack,
                  currentUrl: navState.url,
                });
              }}
              allowsBackForwardNavigationGestures={true}
              incognito={true}
              onMessage={(event) => {
                this.handleWebMassage(event.nativeEvent.data);
              }}
            />
            {this.state.scannerOpen === true && (
              <View style={styles.barcodeScannerContainer}>
                <BarCodeScanner
                  onBarCodeScanned={
                    this.state.scanned ? undefined : handleBarCodeScanned
                  }
                  style={[StyleSheet.absoluteFill, styles.barcodeScanner]}
                >
                  <BarcodeMask edgeColor="#62B1F6" showAnimatedLine={false}/>
                    <TouchableOpacity
                      onPress={() => this.closeScanner()}
                      style={styles.cancel}
                      light
                    >
                      <Icon name="close" color="#58585a" />
                    </TouchableOpacity>
                  </BarCodeScanner>
              </View>
            )}
          </View>

        {this.state.showSplash === true && (
          <View style={styles.splash}>
            <Animated.Image
              onLoad={this.onLoad}
              {...this.props}
              style={[
                {
                  opacity: this.state.opacity,
                  transform: [
                    {
                      scale: this.state.opacity.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0.85, 1],
                      }),
                    },
                  ],
                },
                this.props.style,
              ]}
              style={styles.logo}
              source={logo}
              resizeMode={"contain"}
            />
          </View>
        )}
      </View>

Answer 1

我找到了问题的解决方法。该应用程序在启动时有一个 SplashScreen，我只是将 canGoBack 的状态设置为 false 并在 SplashScreen 关闭时清除 WebViews 历史记录。

this.sleep(5000).then(() => {
  this.setState({
    showSplash: false,
    canGoBack: false,
  });
  this.WEBVIEW_REF.current.clearHistory();
});

在使用 BackHandler 退出 APP 之前，Expo App 中的 react-native webview 在 Android 上显示 'about:blank'

react-native webview in Expo App shows 'about:blank' on Android before exiting the APP with BackHandler

android

react-native

expo

react-native-webview