方式一：

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()