React-Native 当前url和cookies的获取

前面大概介绍了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);
})

  

 

时间: 2024-11-06 19:29:23

React-Native 当前url和cookies的获取的相关文章

React Native之Fetch简单封装、获取网络状态

1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是否请求成功与数据的处理,我们还需处理成功与失败的回调 function getMoviesFromApiAsync() { return fetch('https://facebook.github.io/react-native/movies.json') .then((response) =>

React Native - 使用Geolocation进行定位(获取当前位置、监听位置变化)

1,getCurrentPosition()方法介绍 static getCurrentPosition(geo_success, geo_error?, geo_options? 该方法用于获取当前的位置,其参数如下: (1)geo_success:成功回调函数 (2)geo_error:失败回调函数 (3)geo_options:传递的参数.其支持的属性有: timeout:指定获取地理位置的超时时间,默认不限时.单位为毫秒. maximumAge:最长有效期,在重复获取地理位置时,此参数指

react native 的js 文件从哪里获取

/** * Loading JavaScript code - uncomment the one you want. * * OPTION 1 * Load from development server. Start the server from the repository root: * * $ npm start * * To run on device, change `localhost` to the IP address of your computer * (you can

掌握React Native技术转型随意切换

第1章 课程预热React 与 React Native的区别,为什么学习 React Native. 第2章 初识 React Native快速搭建一个 React Native,了解 RN 的项目代码结构. 第3章 RN 入门知识学习学习React 的组件概念,ES5/ES6 两种组件形态,父子组件通信以及组件生命周期. 第4章 升级 React Native 重要补录这一章节是讲师针对课程上线以来,学生的常见问答,讲师做了一些总结补充视频. 第5章 项目初始准备作为实战编程的上手篇,需要又

React Native之获取通讯录信息并实现类通讯录列表(ios android)

React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用. 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等. 二,技术介绍与配置 2.1 技术介绍 1,react-native-contacts地址:https://www.npmjs.com/package/react-native-contacts 2,下载安装:npm install react-native-contacts --

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

React Native 获取网络数据

getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); }); } 你也可以在React

React Native网络编程之Fetch

目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理 ? 1. 前言 ? 网络请求是开发APP中不可或缺的一部分,比如最基本的获取用户订单数据/获取商品数据/提交表单到服务器等等都离不开网络请求,那么在RN中是如何进行网络请求的呢? ? 2. 什么是Fetch ? Fetch API提供了一个JS接口,用于进行网络操作,例如请求和响应.它还提供了一个全局fetch方法,该方法提供了一种简单,合理的方式来跨网

腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实