[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 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- 电脑是如何识别USB 3.0 U盘的
USB 3.0电缆如图1所示. 图1 USB 3.0的接口比USB 2.0接口多了5根线,这5根线分别是Shield.SSRX+/-和SSTX+/-,即是屏蔽地.超速发送差分对和接受差分对. 因此一个 ...
- WPF 3D 小小小小引擎 - ·WPF 3D变换应用
原文:WPF 3D 小小小小引擎 - ·WPF 3D变换应用 WPF可以提供的3D模型使我们可以轻松地创建3D实体,虽然目前来看还很有一些性能上的问题,不过对于一些简单的3D应用应该是可取的,毕竟其开 ...
- Android TabActivity与Activity之间的动画跳转(主要Tabhost中跳转出来的动画效果解决)
首先,要说的是ActivityA到ActivityB的切换这个相对简单,只要overridePendingTransition(In,out). 这里不就说了.但是这里要说名的ActivityA不能T ...
- 2013年最受欢迎的16个HTML5 WordPress主题
本文中,我整理了16个最新.最受欢迎的WordPress主题,它们一致的特征是支持HTML5, 它们秉承最佳设计理念以及最新的流行趋势,将它们归纳与此,希望对喜欢HTML5,准备用WordPress做 ...
- JNI编程(二) —— 让C++和Java相互调用(1)
自己在外面偷偷的算了下,又有将近两个月没更新过blog了.趁着今天有兴致,来更新JNI编程的第二篇文章.在第一篇里,大概介绍了JNI的特点.用途和优劣.并且做一个最简单的JNI的例子,不过说实话那个例 ...
- 【HDOJ】3016 Man Down
线段树+spfa求最长路.逆向思维,从最底下一块板子建图.需要注意的是任何一个板子掉落下面再无板子,此时都可以看做一个终结状态. /* 3016 */ #include <iostream> ...
- mapreduce源码分析总结
一 MapReduce概述 Map/Reduce是一个用于大规模数据处理的分布式计算模型,它最初是由Google工程师设计并实现的,Google已经将它完整的MapReduce论 文公开发布了.其中对 ...
- bzoj3796
好像已经很久没有做后缀数组的题目,导致这种题一开始没想出来看到公共子串肯定想到后缀数组吧,但我都忘了最长公共子串怎么求了重要的性质:最长公共子串=max(h[i])名次相邻的两个后缀要分别属于s1,s ...
- Android中界面实现全屏显示的两种方式
在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreat ...
- LVS与其他负载均衡软件的区别
有人在邮件列表问haproxy的作者为何haproxy无论是tcp模式还是http模式,能支撑的并发量都不是太大. Willy回答了这个问题. Exactly. The difference is ...