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

发布时间:2024年01月16日

在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 (
            !nativeEvent.loading &&  webViewRef.current &&
            nativeEvent.url.includes('work.weixin.qq.com/kfid')
          ) {
            setTimeout(() => {
              webViewRef.current.goBack();
            }, 100); // 调
          }

        }}
        
      />

文章来源:https://blog.csdn.net/xiaoerduo123x/article/details/135625224
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。