移动端Loading的两种方式--RN

方式一：

1.  先封装一个 Loading 组件

import React from "react";
import { StyleSheet, View, ActivityIndicator } from "react-native";

const Loading = () => (
  <View style={styles.container}>
    <ActivityIndicator />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Loading;

2.model层判断loading状态：

 

import { getResArray } from "../utils";
import apis from "../services/customerApi";

/**
 * Model
 */
export default {
  namespace: "searchModel",
  state: {
    /* 数据查询中 */
    loading: false,
  },

  effects: {
    /* 获取 */
    * search({ payload }, { call, put}) { 
      // 发起获取请求前loading   
      yield put({ type: "setLoading", payload: true });
      const res = yield call(apis.getCustomerDetails, payload);
      // 请求结束后为取消loading
      yield put({ type: "setLoading", payload: false });
      // const { datas = [] } = res;
      // yield put({ type: "saveCustomerDetails", payload: datas });
    },
  },
  reducers: {
    "setLoading": (state, { payload }) => ({
      ...state,
      loading: payload || false,
    }),
  },
};

3. 使用Loading

import React, { Component } from "react";
import { ScrollView, View } from "react-native";
import connect from "react-redux/es/connect/connect";
import styles from "./styles";
import Loading from "./components/Loading";  // 引入Loading组件

class StoreResult extends Component {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: "searchModel/search", payload: keyword });
  }
  
  // 根据请求的状态判断loading，loading为true时显示loading，否则不显示
  render() {
    const { navigation,loading } = this.props;
    return (
      <View style={styles.root}>
        <ScrollView>
          {loading ? <Loading /> : undefined} 
        </ScrollView>
      </View>
    );
  }
}

export default connect(({ searchModel: { loading } }) => ({
  loading,
}))(StoreResult);

方式二：

Toast 轻提示

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

• 一次只显示一个 toast。

• 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

 

// 使用时引入antd-mobile
import { Toast } from "antd-mobile-rn";


// 放在适当的地方
Toast.loading();

 

Toast.loading(content, duration, onClose, mask)

组件提供了五个静态方法，参数如下：
属性        说明                                        类型                                默认值
content    提示内容                               React.Element or String    无
duration    自动关闭的延时，单位秒    number                               3
onClose    关闭后回调                          Function                             无
mask    是否显示透明蒙层，防止触摸穿透    Boolean                    true

（可选）还提供了全局配置和全局销毁方法：

• Toast.hide()