ReactNative 中的进度对话框

Question

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

谢谢

Answer 1

Here is the code to Open 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>
);

Expo url for live demo https://snack.expo.io/@jitendra.mca13/progress-bar-demo

Answer 2

我将通过使用带有两个视图的 React Native Modal 组件来解决这个问题。

该解决方案是一个 React 解决方案，而不是本机解决方案，因此您需要为每个平台相应地设置 Modal 的样式。

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

const ProgressDialog = ({ visible }) => (
  <Modal
    visible={visible}
  >
    <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Please Wait</Text>
        <View style={styles.loading}>
          <View style={styles.loader}>
            <ActivityIndicator size="large" />
          </View>
          <View style={styles.loadingContent}>
            <Text>Loading</Text>
          </View> 
        </View>
      </View>
    </View>
  </Modal>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, .5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    padding: 35,
    backgroundColor: 'white'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  loading: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  loader: {
    flex: 1,
  },
  loadingContent: {
    flex: 3,
    fontSize: 16,
    paddingHorizontal: 10,
  }
})

export default ProgressDialog;

这是 Expo 上的演示，当然您可能想要调整 CSS。

安卓和iOS解决方案

• 创建一个名为 ProgressDialog 的目录
• 创建index.ios.js并index.android.js
• 将以上代码粘贴到index.ios.js和index.android.js
• 针对 iOS 进行 CSS 更改