react-native - React Native 中的进度对话框

Question

我对 ReactNative 世界很陌生。我正在努力寻找在 React Native 中显示如下进度对话框的 API 或库。我相信 ActivityIndi​​cator 可以使用，但它不会显示为叠加。任何人都可以帮助我如何使用样式显示为叠加层，或者是否有很好的库来实现这一点。

谢谢

Answer 1

这是打开 Prgressbar 的代码:

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isProgress: false }
  }
  openProgressbar = () => {
    this.setState({ isProgress: true })
  }
  render() {
    return (
      this.state.isProgress ?
        <CustomProgressBar />
        :
        <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
          <Button title="Please click here to Open ProgressBar" onPress={this.openProgressbar} />
        </View>
    );
  }
}

const CustomProgressBar = ({ visible }) => (
  <Modal onRequestClose={() => null} visible={visible}>
    <View style={{ flex: 1, backgroundColor: '#dcdcdc', alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ borderRadius: 10, backgroundColor: 'white', padding: 25 }}>
        <Text style={{ fontSize: 20, fontWeight: '200' }}>Loading</Text>
        <ActivityIndicator size="large" />
      </View>
    </View>
  </Modal>
);

现场演示的世博网址
https://snack.expo.io/@jitendra.mca13/progress-bar-demo