初识react-native Featch和AsyncStorage
来源:互联网 发布:mysql 自动记录时间 编辑:程序博客网 时间:2024/06/06 07:05
Featch RN的一个网络请求库
第一: 设置一个视图
render() { return ( <View style={styles.container}> <NavigationBar title={'Feach'} statusBar={{ backgroundColor: '#EE6363', }} /> <Text//模拟一个get请求 onPress={() => this.onLoad('http://rap.taobao.org/mockjsdata/13275/index_data.json')} >获取数据</Text> <Text>返回结果:{this.state.hot1}</Text> <Text//这是模拟一个登陆请求 onPress={() => this.onSubmit('https://...', { mobilePhone: '...', passwd: '...' })} >登陸</Text> </View> )
onLoad()方法
constructor(props) { super(props) this.state = { hot1: '' } }onLoad(url) { fetch(url) .then(response => response.json()) .then(hot => { this.setState({ hot1: JSON.stringify(hot) }) } ) .catch(error => { this.setState({ hot1: JSON.stringify(error) }) }) }
POST请求
onSubmit(url, data) { fetch(url, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(data) }) .then(response => response.json()) .then(result => { this.setState({ hot1: JSON.stringify(result) }) }) .catch(error => { this.setState({ hot1: JSON.stringify(error) }) }) }
很简单 也没什么介绍的
get post就是多了一个body体
接下来会请一下网络请求的简单封装
AsyncStorage:是一个react-native的数据存储组件:
简单的几个方法:
AsyncStorage.setItem等于保存一个KEY对应的数据
AsyncStorage.removeItem等于删除一个KEY对应的数据
AsyncStorage.getItem等于获取一个KEY对应的数据
1:先来讲下AsyncStorage.setItem 看下面代码
AsyncStorage.setItem(KEY, 'KEY', (error) => { if (!error) { RN2AndroidM.show("保存成功", RN2AndroidM.SHORT) } else { RN2AndroidM.show("保存失败", RN2AndroidM.SHORT) }})
2:AsyncStorage.removeItem
AsyncStorage.removeItem(KEY, (error) => { if (!error) { RN2AndroidM.show("移除成功", RN2AndroidM.SHORT) } else { RN2AndroidM.show("移除失败", RN2AndroidM.SHORT) }})
3:AsyncStorage.getItem
AsyncStorage.getItem(KEY, (error, result) => { if (!error) { if (result !== '' && result !== null) { RN2AndroidM.show("取出的内容为:" + result, RN2AndroidM.SHORT) } else { RN2AndroidM.show("KEY不存在:", RN2AndroidM.SHORT) } } else { RN2AndroidM.show("取出失败", RN2AndroidM.SHORT) }})
阅读全文
0 0
- 初识react-native Featch和AsyncStorage
- react native AsyncStorage
- React-Native AsyncStorage使用
- React Native之AsyncStorage
- React-Native AsyncStorage setNativeProps
- React-Native AsyncStorage setNativeProps
- Promise and AsyncStorage React Native
- React-native 之 AsyncStorage学习
- React Native——AsyncStorage
- react native AsyncStorage 使用详解
- react-native-AsyncStorage<持久化数据存储>
- 《React-Native系列》28、 RN之AsyncStorage
- React Native使用AsyncStorage本地持久化
- 《React-Native系列》28、 RN之AsyncStorage
- React Native使用AsyncStorage本地持久化
- react-native 使用AsyncStorage实现长登陆
- React Native使用AsyncStorage本地持久化
- React Native之轻量级存储AsyncStorage
- 数据挖掘简介
- python中使用xlrd、xlwt操作excel表格详解
- 移动端rem适配(手淘flexible方案)
- iOS11,Xcode 9.0 报错,Safe Area Layout Guide Before iOS 9.0
- jenkins 视图
- 初识react-native Featch和AsyncStorage
- 爬坑日记--------vue之弹出框传值问题
- VC++文件操作之最全篇
- vue.js中的列表渲染(循环渲染)(v-for)
- Jquery遍历
- cmake 配置交叉编译工作记录
- List自定义排序根据Collections.sort重载方法来实现
- git基本操作(一)
- 第十一周 项目4(1)