时间戳

首页 > 解决方案 > 在获取数据之前，如何在本机反应中使用 activityIndi​​cator？

react-native - 在获取数据之前，如何在本机反应中使用 activityIndi​​cator？

问题描述

我无法加载activityIndicator直到我的数据被提取

if(loanAmount == undefined) {
      return (
        <View style={styles.indicatorContainer}>
          <ActivityIndicator size="large" color={ZW_BUTTON_COLOR} />
        </View>
      );
    }
    else{
      return (
        <View style={styles.container}>
          <View style={styles.repaymentDialog}>
            <View style={styles.imageContainer}>
              <ZWListItemAvatar borrowerObj={selectedBorrower} onPress={this.onShowProfile} />
              <LabelText style={styles.labelDialogName} fontSize={16} >
                {defaultName}
              </LabelText>
            </View>
            <View style={styles.inputContainer}>
              <LabelText style={styles.labelDialogTitle} fontSize={16}>
                {loanState === LOAN_REQUEST_SUBMITTED ?
                  t('repayment-dialog.fee-due') :
                  t('repayment-dialog.amount-repaid')}
              </LabelText>

              <View style={styles.inputSubContainer}>
                <ZWNumericInput
                  defaultValue={defaultValue}
                  textAlign="right"
                  onChangeText={this.changeRepayment}
                />
                <LabelText style={[styles.labelDialogTitle, { alignSelf: 'center' }]} fontSize={16}>
                  {t('repayment-dialog.kyat')}
                </LabelText>
              </View>
              <LabelText style={styles.labelDialogPaid} fontSize={16}>
                Already repaid today {defaultPaid}
              </LabelText>
              {loanState !== LOAN_REQUEST_SUBMITTED &&
                <LabelText style={styles.labelDescription} fontSize={14}>
                  {dayLate} payments missed
              </LabelText>
              }
              <LabelText style={styles.loanContainer} fontSize={16} >
                LOAN: {loan}
              </LabelText>
              <LabelText style={styles.loanContainer} fontSize={16} >
                LOAN AMOUNT: {loanAmount}
              </LabelText>
              {/* <Button title="done" onPress={()=> alert('done')}/>*/}
            </View>
            <View style={styles.actionContainer} >
              <TouchableOpacity style={styles.buttonCancel} onPress={onCancel}>
                <LabelText style={styles.labelCancel} fontSize={13}>
                  {t('repayment-dialog.cancel')}
                </LabelText>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.buttonOK}
                onPress={() => onOK(this.state.repaymentAmount)}
              >
                <LabelText style={styles.labelOK} fontSize={13}>
                  {t('repayment-dialog.ok')}
                </LabelText>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      );

标签： react-native

解决方案

Please follow below code for Indicator.

import React, { Component } from 'react'
import {
  ActivityIndicator,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'

export default class App extends Component {
  render() {
    return (
      <View style={[styles.yourStyle]}>
        {this.state.isProgress && <ActivityIndicator size="large" color="#0000ff" />}
        <your other stuff....> 
      </View>
    )
  }
}

You can also used this into HOC(Higher order component) and use as a generic for all over project. Hope it helps you.

推荐阅读