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>
           )
        }
    }
  • 相关阅读:
    用JLabel显示时间-- JAVA初学者遇到的一个困难
    linux下观看b站视频,解决字体乱码
    fedora21 codeblocks在编辑装态下无法输入
    fedora21安装无线驱动
    Hdu 1053 Entropy
    linux下的压缩解压命令 tar 的简单描述
    表的截断、删除、创建
    列的维护
    非分区表的重组
    创建高效且易于管理的表以及表的管理和维护
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5705976.html
Copyright © 2011-2022 走看看