[React Native] Passing data when changing routes
The way you make HTTP requests in React Native is with the Fetch API. In this video we'll talk about Fetch and how to work with promises.
As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.
Create api.js:
let api = {
getBio(username){
username = username.toLowerCase().trim();
let url = `https://api.github.com/users/${username}`;
return fetch(url).then(res=>res.json());
},
getRepos(username){
username = username.toLowerCase().trim();
let url = `https://api.github.com/users/${username}/repos`;
return fetch(url).then(res=>res.json());
}
}; module.exports = api;
In Main.js:
After button is clicked, call the api to fetch the data and pass the data as a props to the Dashboard component rendered to the veiw by NavigatorIOS:
handleSubmit(event){
//update our indicatorIOS spinner
this.setState({
isLoading: true
});
//fetch data from github
api.getBio(this.state.username)
.then( (res) => {
if(res.message === "Not Found"){
this.setState({
error: 'User not found',
isLoading: false
})
}else{
//Pass in a new router component
this.props.navigator.push({
title: res.name || 'Selet an Option',
component: Dashboard,
passProps: {userInfo: res}
});
//Clean the search input and loading
this.setState({
isLoading: false,
error: false,
username: ''
});
}
})
}
Dashboard.js:
import React, { Component } from 'react';
import {Text, View, StyleSheet} from 'react-native'; const styles = StyleSheet.create({
container: {
marginTop: 65,
flex: 1
},
image: {
height: 350
},
buttonText: {
fontSize: 24,
color: 'white',
alignSelf: 'center'
}
}); class Dashboard extends Component{
render(){
return (
<View style={styles.container}>
<Text>This is the dashboard</Text>
<Text>{JSON.stringify(this.props.userInfo)}</Text>
</View>
);
}
} module.exports = Dashboard;
[React Native] Passing data when changing routes的更多相关文章
- [转] React Native Navigator — Navigating Like A Pro in React Native
There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- React Native (一) 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.笔者 ...
- react native 学习之 native modules
翻译自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Modules 很多情况下,app需要使用 ...
- Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native
Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native:使用 JavaScript 构建原生应用
[转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...
- React Native之 Navigator与NavigatorIOS使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之ListView使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- easyui源码翻译1.32--Menu(菜单)
前言 使用$.fn.menu.defaults重写默认值对象.下载该插件翻译源码 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton.它还 ...
- GridView 根据要求显示指定值
最近在写一个小项目用来练手恢复一下功力的,在Users表中有一个用户字段是状态,我使用"0"表示启用,“1”表示禁用, 存到数据库中, 由于之前有一段时间没写代码了,所以有点生疏了 ...
- WPF中的MatrixTransform
原文:WPF中的MatrixTransform WPF中的MatrixTransform ...
- (转载)NET流操作
http://www.oseye.net/user/kevin/blog/86 概念 数据流(Stream)是对串行传输数据的一种抽象表示,是对输入/输出的一种抽象.数据有来源和目的地,衔接两者的就是 ...
- C#中的OLEDB连接2
在通过ADO对Excel对象进行连接时(此时Excel则认为是一个数据源),需要配置对Excel数据源对应的连接串,这个连接串中包括了Provider信息(其实类似对数据库进行连接操作时,都需要指定连 ...
- [hadoop源代码解读] 【SequenceFile】
SequeceFile是Hadoop API提供的一种二进制文件支持.这种二进制文件直接将<key, value>对序列化到文件中.一般对小文件可以使用这种文件合并,即将文件名作为key, ...
- bzoj1823
第一道2sat, 其实2sat问题不难,只要记住一个:通过“推导出”连边 什么意思呢?就是一般题目中的变量都有两个状态,只能取一个,我们定义为true和false 对于每一个变量i,我们都拆成两个点, ...
- Chrome的隐身模式
先来说说隐身模式的启用方法吧 1.键盘快捷:Ctrl + Shift + N. 2.在Windows7下的任务栏处,右击“Chrome”图标,会出一个下拉菜单,点击“新建隐身窗口”. 3.你还可以在一 ...
- html input设置为只读属性
有两种方式可以实现input的只读效果:disabled 和 readonly. 自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同. Disabled说明该input无效,及其value不会 ...
- Java笔记(十九)……多线程
概述 进程: 是一个正在执行中的程序 每一个进程执行都有一个执行顺序,该执行顺序是一个执行路径,或者叫一个控制单元 线程: 就是进程中的一个独立的控制单元,线程在控制着进程的执行 一个进程中至少有一个 ...