如何在react-native-webview中保持最后一个网络会话处于活动状态？

我正在开发一个应用程序，在该应用程序中我需要使用户的最后一个网络会话保持活动状态react-native-webview.

这是所需的工作流程。

• 我的应用程序只有一个 WebView，其中有固定的 url 正在加载。

• 用户将打开应用程序并登录该网站。

• 当用户杀死应用程序并再次打开它时，我需要保持该用户登录，因为他上次已经登录了。

这是我到目前为止所尝试的：

• 我确实尝试过https://github.com/react-native-community/cookies https://github.com/react-native-community/cookies。到目前为止，我只能通过以下功能保存cookie：

// 列出 cookie（仅限 IOS）

CookieManager.getAll(useWebKit)
    .then((res) => {
        console.log('CookieManager.getAll from webkit-view =>', res);
    });

但正如它所建议的，它只适用于 iOS。我也无法在 WebView 中打开的网站中设置 cookie 以保持该会话处于活动状态。

• 也用过这个，https://gist.github.com/kanzitelli/e5d198e96f81b7a8263745043766127c https://gist.github.com/kanzitelli/e5d198e96f81b7a8263745043766127c

但我还没有发现任何成功。

任何建议或解决方案将受到高度赞赏。

=======更新=======

对于安卓：

它默认工作， 这意味着我们只需要针对 iOS 检查这一点。

实际上这个问题存在于react-native-webview中

应用程序关闭后，iOS 上的 Cookie 会丢失 https://github.com/react-native-community/react-native-webview/issues/528

它应该通过本机代码来解决。但今天我做了一个解决方案并用PHP网站进行了测试

完整代码

import React, {Component} from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import {WebView} from 'react-native-webview';
import CookieManager from '@react-native-community/cookies';
import AsyncStorage from '@react-native-community/async-storage';

let domain="http://example.com";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.currentUrl = '';
    this.myWebView = React.createRef();
    this.state = {
      isReady: false,
      cookiesString: '',
    };
  }

  jsonCookiesToCookieString = (json) => {
    let cookiesString = '';
    for (let [key, value] of Object.entries(json)) {
      cookiesString += `${key}=${value.value}; `;
    }
    return cookiesString;
  };

  componentWillMount() {
    this.provideMeSavedCookies()
      .then(async (savedCookies) => {
        let cookiesString = this.jsonCookiesToCookieString(savedCookies);
        const PHPSESSID = await AsyncStorage.getItem('PHPSESSID');
        if (PHPSESSID) {
          cookiesString += `PHPSESSID=${PHPSESSID};`;
        }
        this.setState({cookiesString, isReady: true});
      })
      .catch((e) => {
        this.setState({isReady: true});
      });
  }

  onLoadEnd = (syntheticEvent) => {
    let successUrl = `${domain}/report.php`;
    if (this.currentUrl === successUrl) {
      CookieManager.getAll(true).then((res) => {
        AsyncStorage.setItem('savedCookies', JSON.stringify(res));
        if (res.PHPSESSID) {
          AsyncStorage.setItem('PHPSESSID', res.PHPSESSID.value);
        }
      });
    }
  };
  onNavigationStateChange = (navState) => {
    this.currentUrl = navState.url;
  };


  provideMeSavedCookies = async () => {
    try {
      let value = await AsyncStorage.getItem('savedCookies');
      if (value !== null) {
        return Promise.resolve(JSON.parse(value));
      }
    } catch (error) {
      return {}
    }
  };

  render() {
    const {cookiesString, isReady} = this.state;
    if (!isReady) {
      return null;
    }
    return (
      <SafeAreaView style={styles.container}>
        <WebView
          ref={this.myWebView}
          source={{
            uri: `${domain}`,
            headers: {
              Cookie: cookiesString,
            },
          }}
          scalesPageToFit
          useWebKit
          onLoadEnd={this.onLoadEnd}
          onNavigationStateChange={this.onNavigationStateChange}
          sharedCookiesEnabled
          javaScriptEnabled={true}
          domStorageEnabled={true}
          style={styles.WebViewStyle}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFF',
  },
  WebViewStyle: {
    flex: 1,
    resizeMode: 'cover',
  },
});

Detail:

Step 1:

get cookies https://github.com/react-native-community/cookies登录并保存后异步存储 https://github.com/react-native-community/async-storage像这样

onNavigationStateChange = (navState) => {
    this.currentUrl = navState.url;
  };

 onLoadEnd = () => {
    let successUrl = `${domain}/report.php`;
    if (this.currentUrl === successUrl) {
      CookieManager.getAll(true).then((res) => {
        AsyncStorage.setItem('savedCookies', JSON.stringify(res));
        if (res.PHPSESSID) {
          AsyncStorage.setItem('PHPSESSID', res.PHPSESSID.value);
        }
      });
    }
  };

Step 2:

enable sharedCookiesEnabledprops 并在 componentWillMount 中获取保存的 cookie 并制作为必需的webview header cookies 格式 https://github.com/react-native-community/react-native-webview/blob/v10.1.0/docs/Guide.md#managing-cookies by jsonCookiesToCookieString函数并停止渲染 webviewisReadyprops utils 你得到cookie

jsonCookiesToCookieString = (json) => {
    let cookiesString = '';
    for (let [key, value] of Object.entries(json)) {
      cookiesString += `${key}=${value.value}; `;
    }
    return cookiesString;
  };

provideMeSavedCookies = async () => {
    try {
      let value = await AsyncStorage.getItem('savedCookies');
      if (value !== null) {
        return Promise.resolve(JSON.parse(value));
      }
    } catch (error) {
      return {}
    }
  };

componentWillMount() {
    this.provideMeSavedCookies()
      .then(async (savedCookies) => {
        let cookiesString = this.jsonCookiesToCookieString(savedCookies);
        const PHPSESSID = await AsyncStorage.getItem('PHPSESSID');
        if (PHPSESSID) {
          cookiesString += `PHPSESSID=${PHPSESSID};`;
        }
        this.setState({cookiesString, isReady: true});
      })
      .catch((e) => {
        this.setState({isReady: true});
      });
  }

Step 3:

将 cookiesString 传入网页视图标题 https://github.com/react-native-community/react-native-webview/blob/v10.1.0/docs/Guide.md#managing-cookies并像这样编写渲染函数

render() {
    const {cookiesString, isReady} = this.state;
    if (!isReady) {
      return null;
    }
    return (
      <SafeAreaView style={styles.container}>
        <WebView
          ref={this.myWebView}
          source={{
            uri: `${domain}`,
            headers: {
              Cookie: cookiesString,
            },
          }}
          scalesPageToFit
          useWebKit
          onLoadEnd={this.onLoadEnd}
          onNavigationStateChange={this.onNavigationStateChange}
          sharedCookiesEnabled
          javaScriptEnabled={true}
          domStorageEnabled={true}
          style={styles.WebViewStyle}
        />
      </SafeAreaView>
    );
  }