javascript - 无法添加isLoading

Question

我是 react 原生新手。我尝试在 Location.js 组件文件中添加 isLoading，但遇到困难。我尝试在 info 获取纬度和经度时添加 ActivityIndi​​cator，但 ActivityIndi​​cator 显示加载但未覆盖所有内容。我正在尝试添加 isLoading，而所有数据均已从 API 获取。

// 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

首先，您显示的代码对加载部分进行了注释，因此我认为这不是您实际使用的代码，这使得实际向您推荐解决方案变得更加困难。

如果您想要在屏幕中间有一个加载旋转器并隐藏其他所有内容，则需要在其周围添加一个 View :

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