解决方案：reactNative通过webview跳转微信智能客服空白webview页面

最新推荐文章于 2024-03-27 21:00:12 发布

wen's

最新推荐文章于 2024-03-27 21:00:12 发布

阅读量546

点赞数 6

分类专栏：前端 react.js 文章标签： react native 微信 react.js

本文链接：https://blog.csdn.net/xiaoerduo123x/article/details/135625224

版权

本文介绍了如何在ReactNative的webview中使用`onLoadEnd`方法处理从微信智能客服返回应用时出现的空白页问题，通过设置`onLoadEnd`回调并在满足特定条件时调用`goBack()`解决用户体验问题。

摘要由CSDN通过智能技术生成

在reactNative中使用webview跳转微信智能客服，功能正常，从微信退回到App时，会有一个空白的webview页面，在使用感觉上不是那么的顺滑。解决这个可以在webview中使用onLoadEnd方法来解决这个问题

在react-native-webview中onLoadEnd使用的方法是

根据这个API我们可以调整自己的webview，来解决这个空白屏的问题

<WebView
        ref={webViewRef}
        startInLoadingState
        renderLoading={() => (
          <View style={styles.loadingContainer}>
            <Lottie
              source={require('./loading.json')}
              autoPlay
              loop
              style={
  { width: 150, height: 150 }}
            />
          </View>
        )}
        source={
  { uri: route?.params?.uri }}
        onLoadEnd={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          if (
            !