zoukankan      html  css  js  c++  java
  • [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;

      

  • 相关阅读:
    Prism 源码解读5-数据绑定和命令
    Prism 源码解读4-ViewModel注入
    Prism 源码解读3-Modules加载
    Prism 源码解读2-View的加载和控制
    java中int 类型的移位运算与位运算
    二进制、十六进制理解及int类型二进制存储方式
    git bash返回上一级目录
    关于我
    【设计模式】设计原则--面向接口编程你理解的对吗?
    回到未来:Smalltalk 编程系统
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5702155.html
Copyright © 2011-2022 走看看