rn-loading v1.0.0

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