Question

我通过异步请求获取数据。我知道在显示数据之前我需要等待api请求完成。不幸的是，我不确定如何创建一个加载器来等待数据加载。我是新的反应，所以如果我也可以得到实现它的帮助，那将是太棒了！这是我目前的代码：

@TransactionManagement(TransactionManagementType.BEAN)
@Stateful(mappedName = "testSession")
@SessionScoped
@TransactionAttribute(value = TransactionAttributeType.REQUIRED)
public class TestSession {

@PersistenceContext(unitName="MySqlXA",type=PersistenceContextType.EXTENDED)    
private EntityManager entityManager;

@Resource private UserTransaction userTransaction;

First request/ thread one

    userTransaction.begin();    
    Query query = entityManager.createQuery(sqlQuery);
    List<SomeTable> queryResult = (List<SomeTable>)query.getResultList();
    populate a SessionScoped ManagedBean

    user think time
    make updates through the UI and submit

Second request / thread two

   TableOneRow tableOneRow = new TableOneRow(someStuff);
   TableTwoRow tableTwoRow = entityManager.find(otherStuff);

    entityManager.persist(tableOneRow);
    entitymanager.merge(tableTwoRow);

Third request / thread three submit for commit

   userTransaction.commit();

or Third request / thread three submit for abort

   userTransaction.rollback();

}

Answer 1

使用ActivityIndicator -

的简单示例

导入import { View, Text, ListView, StyleSheet, TouchableHighlight, ActivityIndicator} from 'react- native';

data

将constructor(props) { super(props); this.state = { data: null } }状态设置为null

  render() {
    if (!this.state.data) {
      return (
        <ActivityIndicator
          animating={true}
          style={styles.indicator}
          size="large"
        />
      );
    }

    return (
      <View style={{flex: 1}}>
        <Header pageName="Calendar" navigator={this.props.navigator}/>
        ....
        ....
      </View>
    );
  }
}

进行条件渲染

const styles = StyleSheet.create({
  indicator: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 80
  }
});

指标式

{{1}}

Answer 2

尽管@vinayr提出的解决方案运行良好，但即使显示可能导致崩溃的加载程序，用户仍然可以点击屏幕并执行某些操作。

一种解决方案是在Modal中包装加载器。

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

const styles = StyleSheet.create({
  modalBackground: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'space-around',
    backgroundColor: '#00000040',
  },
  activityIndicatorHolder: {
    backgroundColor: '#FFFFFF',
    height: 100,
    width: 100,
    borderRadius: 10,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});


const SmartLoader = (props) => {
  const {
    isLoading,
    ...attributes
  } = props;

  return (
    <Modal
      transparent
      animationType={'none'}
      visible={isLoading}
      onRequestClose={() => { console.log('Noop'); }}
    >
      <View style={styles.modalBackground}>
        <View style={styles.activityIndicatorHolder}>
          <ActivityIndicator
            animating={isLoading}
            size="large"
          />
        </View>
      </View>
    </Modal>
  );
};

export default SmartLoader;

之后，您可以在组件中的任何位置使用它，用户将无法执行任何操作，直到加载程序完成（基于标志隐藏）

如何在React Native中获取数据之前呈现加载器

2 个答案: