RN自定义lodding提示框(带遮罩层)

组件代码

import React, {useState} from 'react';
import {View, Text, Modal, ActivityIndicator, StyleSheet} from 'react-native';

const LoadingModal = ({visible}) => {
  return (
    <Modal transparent={true} animationType="none" visible={visible}>
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorWrapper}>
          <ActivityIndicator size="large" color="#0000ff" />
          <Text>Lodding...</Text>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.2)', // 半透明蒙层
  },
  activityIndicatorWrapper: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
  },
});

export default LoadingModal;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

使用

// 控制显示lodding框和隐藏lodding框
<Model visible={true}></Model>
1
2