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>
           )
        }
    }
  • 相关阅读:
    WPF MarkupExtension
    WPF Binding小数,文本框不能输入小数点的问题
    WPF UnhandledException阻止程序奔溃
    .Net Core的总结
    C#单元测试
    Csla One or more properties are not registered for this type
    unomp 矿池运行问题随记
    矿池负载运行监测记录
    MySql 数据库移植记录
    后台服务运行后无故停止运行,原因不明
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5705976.html
Copyright © 2011-2022 走看看