The simplest network load indicator of react-native

Datetime:2017-04-18 05:32:06         Topic: ReactNative          Share        Original >>
Here to See The Original Article!!!

The simplest network load indicator of react-native

If you want to learn React-Native cross platform project,Check out ComicBook .

Design sketch

DownLoad Project

git clone https://github.com/liyuechun/react-native-simplest-hud.git

Install

npm install --save react-native-simplest-hud

Usage

import { RNProgressHUD,mixin } from 'react-native-simplest-hud';

import jsonData from './data.json';

class ExamplePage extends  mixin(RNProgressHUD.Mixin){
<!--mixin(RNProgressHUD.Mixin) replace Component-->
    ...
    render(){
        return(
            <View style={{flex: 1,backgroundColor: 'white'}}>
                ...
                <RNProgressHUD
                    isVisible={this.state.is_hud_visible} //Fixed writing
                    color='rgb(69,149,252)' //hud color
                    label="Loading..."  //"" or "Prompt string"
                    isActivityIndicator={true} //true or false
                />
                ...
            </View>
        );
    }
}

Showing the HUD

You can display the HUD by calling:

this.showHUD();

Dismissing the HUD

It can be hide by calling:

this.hideHUD();

Props

The following props can be used to modify the HUD's style and/or behaviour:

Prop Type Opt/Required Default Note
isVisible Boolean Required N/A Displays the HUD when set to true.
isActivityIndicator Boolean Optional false When set to true, the HUD is show by the ActivityIndicator style,or showing by the Rotating ring style.
label String Optional Loading... Sets Prompt string of the HUD.
color String Optional rgb(69,149,252) Sets the color of the HUD spinner.







New