[React Native] Passing data when changing routes
React Data native when routes Changing
2023-09-14 08:59:19 时间
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路由原理解析[通俗易懂]
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react源码解析14.手写hooks_2023-03-01
- React的组件复用的发展史
- react源码分析--深度理解React.Context
- React的useState和setState到底是同步还是异步呢?
- 从React源码来学hooks是不是更香呢_2023-02-07
- React Context源码是怎么实现的呢_2023-03-15
- 前端常见react面试题合集_2023-03-15
- ORA-55631: Table has columns with data types that are not supported by Flashback Data Archive ORACLE 报错 故障修复 远程处理
- 初探MySQL:Data初始化指南(mysql初始化data)
- MySQL中的Data类型简介(mysql中data类型)
- MySQL数据格式之Data详解(mysql中data格式)
- 深入探究MySQL数据处理Data函数原理与使用方法(mysql中data函数)
- MySQL中Data的存储和管理技巧(mysql中data)
- 深入了解MySQL数据管理之Data(mysql下的data)
- MySQL数据库无法找到Data目录(mysql下没有data)