rn-loading

一款简单易用的 Loading 组件，支持 Android&iOS。

目录

• 安装
• 如何使用？
• API
• 贡献

安装

• 1.在终端运行 npm i rn-loading --save
• 2.在要使用Loading的js文件中添加import Loading from 'rn-loading'

如何使用？

第一步：

在你的js文件中导入 rn-loading：

import Loading from 'rn-loading'

第二步：

将下面代码插入到render()方法中：

 render() {
          return (
              <View style={styles.container}>
                  ...
                  <Loading ref="loading"/>
              </View>
          );
  }

注意: 请将<Loading ref="loading"/> 放在最外层View的底部.

第三步：

使用：

  // 显示 loading
  this.refs.loading.show();

  // 关闭 loading ui
  this.refs.loading.show(false);
  // 或者调用close方法关闭
  this.refs.loading.close();

或者使用Loading的 show属性控制显示和关闭状态

render() {
          return (
              <View style={styles.container}>
                  ...
                  <Loading show={true/false}/>
              </View>
          );
  }

用例

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    onPress={()=>{
                        this.refs.loading.show();
                    }}>
                    <Text>Start Loading</Text>
                </TouchableHighlight>
                <Loading ref="loading"/>
            </View>
        );
    }

自定义 Loading

render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    onPress={()=>{
                        this.refs.loading.show();
                    }}>
                    <Text>Start Loading</Text>
                </TouchableHighlight>
                <Loading
                    ref="loading"
                    image=require('../path/imagename.png')
                    backgroundColor='#ffffffF2'
                    borderRadius=5
                    size=70
                    imageSize=40
                    indicatorColor='gray'
                    easing=Loading.EasingType.ease
                />
            </View>
        );
    }

API

属性 | 类型 | 可选 | 默认值 | 描述 ----------------- | -------- | -------- | ----------- | ----------- image | PropTypes.any |true | null | 自定义加载图片 backgroundColor | PropTypes.string | true | '#ffffffF2' | 自定义加载UI背景颜色 borderRadius | PropTypes.number | true | 5 | 自定义加载UI圆角 size | PropTypes.number | true | 70 | 自定义加载UI高宽尺寸 imageSize | PropTypes.number | true | 40 | 自定义加载UI图片高宽尺寸 indicatorColor | PropTypes.string | true | 'gray' | 自定义默认加载器颜色 easing | PropTypes.func | true | Easing.ease | 自定义加载动画样式

方法 | 类型 | 可选 | 描述 ----------------- | -------- | -------- | ----------- show(bool) | function | true | 显示加载器 close() | function | - | 隐藏关闭加载器