Question

我是本机反应的新手。我试图在我的Location.js组件文件中添加isLoading，但是这样做很麻烦。当信息获取经度和纬度时，我尝试添加activityIndicator，但是activityIndicator显示加载时未覆盖所有内容。我正在尝试从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

首先，正在显示的代码已注释了正在加载的部分，因此我认为这不是您实际使用的代码，因此很难为您推荐一种解决方案。

如果要在屏幕中间放置一个加载微调器并隐藏其他所有内容，则需要在其周围添加一个视图：

from __future__ import print_function
from googleapiclient.discovery import build
from httplib2 import Http
from oauth2client import file, client, tools
from members import Members
from user import User
from service import Service
import requests


def main():

    member = Members("group@ldomain.com")
    members_list = member.get_members()

    for member in members_list:
        print(member)
        user = User(member)
        messages = user.get_user_inbox()
        user.get_message_info(messages)

if __name__ == '__main__':
    main()

无法添加isLoading

1 个答案: