React-Native 当前url和cookies的获取

Posted 2020-07-07 RETHINK

前面大概介绍了react-native的运行helloword级别的入门，所以之后简单的东西就不写了，毕竟官网上都能够找到。

reactnative官网：https://facebook.github.io/react-native/docs/getting-started.html

reactnative中文网：http://reactnative.cn/docs/0.25/getting-started.html

之后我会把工作中遇到的一些react-native的深坑分享一下。

 

正题===========================

客户端cookies的获取就是一个大坑。

1.使用三方

研究ReactNative的源码发现，框架中并没有实现ios的NSHTTPCookieStorage的api，所以搜遍百度谷歌和bing，最终找到了一个哥们写的第三方cookies工具：

https://github.com/joeferraro/react-native-cookies

这里需要一提的是，我需要取得cookie不仅是dictionary形式的cookies，而是用于http请求的cookiesHeader，其格式是string，在OC中取得的方式是：

NSArray *cookies = [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookiesForURL:url];
NSDictionary *header = [NSHTTPCookie requestHeaderFieldsWithCookies:cookies];

但这一块原作者的框架中貌似存在一定的问题，所以我写了一个pull request，具体可以访问我fork的项目：

https://github.com/rayshen/react-native-cookies

 

2.获取当前url

这就需要结合webview控件来进行操作了。

首先我们需要确定当前的url，当前的url可以从webview控件绑定的事件onNavigationStateChange去取得：

onNavigationStateChange={this.onNavigationStateChange.bind(this)}

 onNavigationStateChange(navState) {
     console.log(navState.url);
     this.curUrl = navState.url;
  }

 

3.取得url的cookie header:

 CookieManager.getHeader(this.curUrl, (err, res) => {
      console.log(‘Got cookies for url: ‘ + res.Cookie);
 })

 

4.取得url的所有cookies

CookieManager.get(‘http://example.com‘, (err, res) => {
  console.log(res);
})