無法添加isLoading

Question

我是本機反應的新手。 我試圖在我的Location.js組件文件中添加isLoading，但是這樣做很麻煩。 當信息獲取經度和緯度時，我嘗試添加activityIndi​​cator，但是activityIndi​​cator顯示加載時未覆蓋所有內容。 我正在嘗試從API提取所有數據時添加isLoading。

// Location.js
import React, {
  Component
} from 'react';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Header,
  TextInput,
  ActivityIndicator,
  View,
  Modal,
  Alert,
  Button,
  scrollView,
  Image,
  Text,
} from 'react-native';
import {
  createDrawerNavigator,
  toggleDrawer
} from 'react-navigation';
import {
  connect
} from 'react-redux';
import {
  bindActionCreators
} from 'redux';
import {
  AsyncStorage
} from "react-native";
import GeoInfoView from './GeoInfoView';
import styles from '../themes/styles'
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import KonoHeader from './KonoHeader';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

export default class Location extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      info: {
        latitude: null,
        longitude: null
      },
      error: null,
      placeinfo: 0
    };
  }

  componentDidMount() {
    //@see https://hackernoon.com/react-native-basics-geolocation-adf3c0d10112
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          info: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          },
          error: null,
          placeinfo: 1
        });
        //this.setState({ info, isLoading: false })
        this.getPlaceInfo(position.coords)
      },
      (error) => this.setState({
        error: error.message
      }), {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000
      },
    );

  }

  getPlaceInfo(coords) {
    url = ApiConfig.API_URL + '/api/placeinfo?latitude=   ' + coords.latitude + '&longitude=' + coords.longitude
    //this.setState({ url, isLoading: false })
    console.log("fetching placeinfo for", coords, url)
    return fetch(url).then((response) => response.json())
      .then((rs) => {
        //this.setState({ info, isLoading: true })
        console.log("got search result data", rs);
        newState = Object.assign({}, this.state, { info: rs });
        newState = Object.assign({}, newState, { placeinfo: 2 });
        this.setState(newState)
      })
      .catch((error) => {
        console.error(error);
      });

  }

  render() {
    //const { info, isLoading } = this.state;
    /* {
       isLoading && (
         <ActivityIndicator
           style={{ height: 80 }}
           color="#C00"
           size="large"
         />
       )
     }
 */
    return (
      <View style={styles.indexviewgeo}>
        <KonoHeader />
        <GeoInfoView infodata={this.state.info} />
      </View>
    );
  }

}

// GeoInfoView.js

import React, {
  Component
} from 'react';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  TextInput,
  View,
  ActivityIndicator,
  Alert,
  Button,
  scrollView,
  Image,
  Text,
} from 'react-native';
import {
  createDrawerNavigator,
  toggleDrawer
} from 'react-navigation';
import styles from '../themes/styles'
import {
  BackHandler
} from 'react-native';

export default class GeoInfoView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //isLoading: true
    }
  }
  render() {
    console.log("got info", this.props.infodata)
    info = this.props.infodata
    return (
      <View style={styles.geoview}>
        <View style={styles.rowgeo}>
          <Text style={styles.labelgeo}>Latitude</Text>
          <Text style={styles.valgeo}>{info.latitude}</Text>
        </View>
        <View style={styles.rowgeo}>
          <Text style={styles.labelgeo}>Longitude</Text>
          <Text style={styles.valgeo}>{info.longitude}</Text>
        </View>
        {info.w3w && <View style={styles.rowgeo}>
          <Text style={styles.labelgeo}>What 3 Words</Text>
          <Text style={styles.valgeo}>{info.w3w}</Text>
        </View>}
        {info.district && <View style={styles.rowgeo}>
          <Text style={styles.labelgeo}>District</Text>
          <Text style={styles.valgeo}>{info.district.name}</Text>
        </View>}
        {info.state && <View style={styles.rowgeo}>
          <Text style={styles.labelgeo}>State</Text>
          <Text style={styles.valgeo}>{info.state.name}</Text>
        </View>}
      </View>

    );
  }
}

請提出如何在獲取API數據調用時運行isLoading。 我還添加了GeoInfoView.js文件以獲取詳細信息，這是我想做的。 並建議在Loacation.js或GeoInfoView.js中的isLoading添加位置。

Answer 1

首先，所顯示的代碼已注釋了正在加載的部分，因此我認為這不是您實際使用的代碼，因此很難為您推薦一種解決方案。

如果要在屏幕中間放置一個加載微調器並隱藏其他所有內容，則需要在其周圍添加一個視圖：

{
       isLoading && (
<View style={{width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center'}}>         
<ActivityIndicator
           style={{ height: 80 }}
           color="#C00"
           size="large"
         />
</View>
       )
     }