反应原生：ActivityIndi​​cator 没有按预期工作；它一直显示

问题描述

当我点击 Ionicon 时我应该只看到 ActivityIndi​​cator 当它是白色的但 ActivityIndi​​cator 永远不会停止工作。

当 getSamplestochoose 函数完成其操作时它应该停止。

函数 getSamplestochoose

function getSamplestochoose() {
    const fromDate = params.fromDate;
    const toDate = params.toDate;
    console.log('getSamplestochoose for ws:',selectedWaterSource);
    if (selectedWaterSource.length === 0) {
      Toast.show({ text1: 'no choose points' });
      return;
    }
    (async () => {
      const wsRequestCount = await wsSampleRequestBySource(
        // check webservice
        selectedWaterSource,fromDate,toDate
      );
      if (wsRequestCount === 0) {
        //no requests from server
        Toast.show({
          text1: 'no drishot:' + fromDate + ' lebein:' + toDate,text2: selectedWaterSource + ' points: ',});
      }
      // updated db
      const requestList = await getRequestBySourceAndDates(
        selectedWaterSource,toDate
      );
      if (requestList.length > 0) {
        // there are requests. move to next screen with list
        navigation.navigate('list of drishot',{
          paramsFromNekudotDigum: {
            requestList,fromDate: date1.toISOString().slice(0,10),toDate: date2.toISOString().slice(0,},});
      }
      toggleLoading(false);
    })();
  }

import {ActivityIndicator} from 'react-native';

export default function tomato() {
const [isLoading,toggleLoading] = useState(false);

return (
<TouchableOpacity
            activeOpacity={1}
            onPress={!isLoading ? () => {
              toggleLoading(true);
              getSamplestochoose();
            } : null}
          >
            <View>
              <NavigationDialog />
            </View>
            {
              isLoading ?
                <View style={styles.indicator}>
                  <ActivityIndicator size="large" color="#4abdff" />
                </View>
                :
                <Ionicon
                  style={{ bottom: -10 }}
                  name="md-checkmark-circle-outline"
                  size={30}
                  color={
                    Array.isArray(selectedWaterSource) === true &&
                      selectedWaterSource.length > 0
                      ? 'white'
                      : 'gray'}
                />
            }
          </TouchableOpacity>
 );
}

解决方法

好吧，我认为您的函数存在一些漏洞，这意味着它可能会运行而无法到达您关闭活动指示器的底部，因此请尝试以下代码：

function getSamplesToChoose() {
    const fromDate = params.fromDate;
    const toDate = params.toDate;
    console.log('getSamplesToChoose for ws:',selectedWaterSource);
    if (selectedWaterSource.length === 0) {
      Toast.show({ text1: 'no choose points' });
      toggleLoading(false)
      return;
    }
    (async () => {
      const wsRequestCount = await wsSampleRequestBySource(
        // check webservice
        selectedWaterSource,fromDate,toDate
      );
      if (wsRequestCount === 0) {
        //no requests from server
        Toast.show({
          text1: 'no drishot:' + fromDate + ' lebein:' + toDate,text2: selectedWaterSource + ' points: ',});
        toggleLoading(false)
      }
      //updated db
      const requestList = await getRequestBySourceAndDates(
        selectedWaterSource,toDate
      );
      if (requestList.length > 0) {
        // there are requests. move to next screen with list 
        toggleLoading(false) //first turn off the Activity Indicator
        navigation.navigate('list of drishot',{
          paramsFromNekudotDigum: {
            requestList,fromDate: date1.toISOString().slice(0,10),toDate: date2.toISOString().slice(0,},});
      }
      toggleLoading(false);
    })();
  }