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

本文介绍在React Native中实现加载状态与轻提示的方法。通过封装Loading组件并结合Redux状态管理,实现在数据请求过程中的加载动画显示。同时,展示了如何使用Toast组件进行页面转场或数据交互时的轻量级反馈。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方式一:

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

### 移动端 tui-image-editor 使用指南 #### 安装与初始化 在移动端使用 `tui-image-editor` 之前,需要先完成其安装和基本配置。可以通过 npm 或 yarn 进行安装[^1]。 ```bash npm install @toast-ui/image-editor ``` 或者: ```bash yarn add @toast-ui/image-editor ``` 接着,在 HTML 文件中引入必要的 CSS 和 JavaScript 文件[^2]。 ```html <link rel="stylesheet" href="https://uicdn.toast.com/imageEditor/latest/toastui-image-editor.css"> <script src="https://uicdn.toast.com/imageEditor/latest/toastui-image-editor.js"></script> ``` #### 初始化 ImageEditor 组件 创建一个容器用于承载图像编辑器,并通过 JavaScript 初始化该组件。 ```javascript const container = document.getElementById('tui-image-editor'); const options = { includeUI: { loadImage: { path: 'path_to_your_image.jpg', name: 'SampleImage' }, theme: new tui.ImageEditor.Theme(), // 可选主题设置 menuBarPosition: 'bottom' // 设置菜单栏位置为底部,适合移动端操作 }, cssMaxWidth: 800, cssMaxHeight: 600, usageStatistics: false }; const imageEditor = new tui.ImageEditor(container, options); ``` 此处设置了 `menuBarPosition: 'bottom'` 参数,以便将工具栏放置在屏幕底部,从而更方便用户在移动设备上的触控操作[^3]。 #### 加载本地图片 对于移动端应用来说,通常会允许用户从相册或相机中选择图片并加载到编辑器中。可以利用 `loadImageFromFile` 方法实现这一功能。 ```javascript function loadLocalImage(event) { const file = event.target.files[0]; if (file) { imageEditor.loadImageFromFile(file, 'SampleImage').then(() => { console.log('Image loaded successfully.'); }).catch((error) => { console.error('Error loading image:', error); }); } } document.getElementById('image-input').addEventListener('change', loadLocalImage); ``` 此方法支持异步加载用户上传的文件,并将其作为新的源图像展示出来。 #### 性能优化建议 由于移动设备硬件资源有限,在实际开发过程中需要注意以下几个方面以提高性能体验: - **延迟加载**:如果页面中有多个复杂的组件,则可考虑采用懒加载技术只在必要时才实例化图像编辑器[^3]。 - **分辨率调整**:针对高像素密度的照片适当缩小尺寸后再传入编辑区,减少内存占用。 - **手势识别增强**:启用内置的手势控制插件让缩放旋转更加流畅自然。 ```javascript // 启用手势扩展模块 import 'tui-code-snippet'; import 'tui-dom'; options.usageStatistics = true; options.includeUI.useDefaultUI = false; new tui.plugins.Gesture(imageEditor); ``` 以上代码片段展示了如何激活手势支持来改善触摸屏交互效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值