zoukankan      html  css  js  c++  java
  • [React Native] Error Handling and ActivityIndicatorIOS

    With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.

    What you want is when calling the fetch api, showing the loading spinner. If success or not found user will hide the loadin spinner. For user not found, will show the error message.

    import React, { Component, PropTypes } from 'react';
    import { View, Text, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS } from 'react-native';
    import api from '../utils/api';
    import Dashboard from './Dashboard';
    
    var style = StyleSheet.create({
        mainContainer: {
            flex: 1,
            padding: 30,
            marginTop: 65,
            flexDirection: 'column',
            justifyContent: 'center',
            backgroundColor: '#48BBEC'
        },
        title: {
            marginBottom: 20,
            fontSize: 25,
            textAlign: 'center',
            color: '#fff'
        },
        searchInput: {
            height: 50,
            padding: 4,
            marginRight: 5,
            fontSize: 23,
            borderWidth: 1,
            borderColor: 'white',
            borderRadius: 8,
            color: 'white'
        },
        buttonText: {
            fontSize: 18,
            color: '#111',
            alignSelf: 'center'
        },
        button: {
            height: 45,
            flexDirection: 'row',
            backgroundColor:'#8fefcc',
            borderColor:'white',
            borderWidth:1,
            borderRadius:8,
            marginBottom:10,
            alignSelf:'stretch',
            justifyContent:'center'
        }
    });
    
    export default class Main extends Component{
        constructor(props){
            super(props)
            this.state = {
              username: '',
              isLoading: false,
              error: false
            };
        }
        handleChange(event){
            this.setState({
                username: event.nativeEvent.text
            })
        }
        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: 'User not found'
                        });
                    }
                })
        }
        render(){
            const showError = (
                this.state.error ? <Text>User not found</Text>: <View></View>
                        );
           return (
               <View style={style.mainContainer}>
                   <Text style={style.title}>Search for a Github User</Text>
                   <TextInput
                     style={style.searchInput}
                     value={this.state.username}
                     onChange={this.handleChange.bind(this)}
                   />
                   <TouchableHighlight
                    style={style.button}
                    onPress={this.handleSubmit.bind(this)}
                    underlayColor="white"
                   >
                       <Text style={style.buttonText}>SEARCH USER</Text>
                   </TouchableHighlight>
                   <ActivityIndicatorIOS
                    animating={this.state.isLoading}
                    size="large"
                    color="#111"
                   />
                   {showError}
               </View>
           )
        }
    }
  • 相关阅读:
    java 爬虫 爬取豆瓣 请不要害羞 图片
    Intellij idea 基本配置
    Linux 基本操作
    Java 快速排序
    Codeforces 986D Perfect Encoding FFT
    Codeforces 749E Gosha is hunting 二分+DP
    BZOJ5305 [Haoi2018]苹果树
    Codeforces 666E Forensic Examination SAM+权值线段树
    BZOJ3712[PA2014]Fiolki 建图+倍增lca
    Codeforces 576D Flights for Regular Customers 矩阵快速幂+DP
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5705976.html
Copyright © 2011-2022 走看看