react-native-easy-loading-view

预览

开始

$ npm install react-native-easy-loading-view react-native-animated-spinkit --save

例子

Check example in the folder.

$ cd example
$ npm install
$ react-native run-ios

用法

必须在根节点引入Loading组件,在整个项目中只需要且只能引用一个

import Loading from '@yz1311/react-native-easy-loading-view';
render() {
        return (
            <View style={[{flex:1}]}>
                <App/>
                <Loading
                    ref={(view)=>{Loading.loadingDidCreate(view)}} // 必须调用
                />
            </View>
        );
    }

使用loading(显示或者隐藏)

import Loading from '@yz1311/react-native-easy-loading-view';

Loading.showLoading("加载中..."); //显示loading

Loading.hideLoading(); // 消失

参数

| 属性 | 默认值 | 类型 | 描述 | | :------------ |:---------------:| :---------------:| :-----| | style | null | style | 最外层的样式 | | backgroundColor | rgba(255,0,0,.1) | color | 最外层的背景色 | | loadingStyle | 0 | style | 加载loading样式 | | indicatorSize | 30 | number | 加载图标的大小 | | indicatorColor | #ffffff | color | 加载图标的颜色 | | renderIndicator | null | element | 加载图标自定义 | | indicatorStyle | null | style | 加载图标样式 | | text | 加载中... | string | 加载文字 | | textStyle | null | style | 加载文字样式 |

方法

showLoading(text)

参数:

| 名称 | 类型 | 默认值 | 描述 | 可选 | | :---- | :------: | :------: | :--- | :--- | | text | string | 加载中... | 底部文字 | 是 |

hideLoading()