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>
           )
        }
    }
  • 相关阅读:
    hdu 5648 DZY Loves Math 组合数+深搜(子集法)
    hdu 5647 DZY Loves Connecting 树形DP
    hdu 4550 卡片游戏 贪心
    hdu 5646 DZY Loves Partition 二分+数学分析+递推
    hdu 2196 Computer 树形DP
    poj 2342 Anniversary party 树形DP入门
    Vijos P1003 等价表达式 随机数+单调栈
    【BZOJ】1044: [HAOI2008]木棍分割 二分+区间DP
    【BZOJ】1925: [Sdoi2010]地精部落 DP+滚动数组
    【BZOJ】1012: [JSOI2008]最大数maxnumber 树状数组求区间最值
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5705976.html
Copyright © 2011-2022 走看看