方式一:
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 轻提示
一种轻量级反馈/提示,可以用来显示不会打断用户操作的内容,适合用于页面转场、数据交互的等场景中。
// 使用时引入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
(可选)还提供了全局配置和全局销毁方法: