无法使ActivityIndi​​cator与React Native中的mobX一起显示

时间:2018-10-30 20:35:20

标签: react-native mobx

我一直在尝试使ActivityIndi​​cator在发出http请求(Axios)时显示,我正在使用mobX发出http请求。我尝试了许多变体而没有成功。我的代码如下:

ProductScreen.js

import React, { Component } from "react";
import { AsyncStorage, TouchableOpacity, TouchableHighlight, StyleSheet, Text, View, Button, AppRegistry, Image, TextInput } from 'react-native';
import { observable } from "mobx";
import { observer, injexct } from "mobx-react";
import Loading from '../components/Loading'

@inject("productStore")
class ProductScreen extends Component {   constructor(props: Object) {
    super(props);   }

  render() {
    return (
      <View>
        <TouchableOpacity style={
          [{
            paddingTop: 10,
            paddingBottom: 10,
            borderRadius: 5,
            marginBottom: 20,
            width: '70%',
            backgroundColor: '#009688'
          }]
        } activeOpacity={.5}
          onPress={this.props.productStore.getProductDetails}
        >
          <Text>Get Product Details</Text>
        </TouchableOpacity>
        {this.props.productStore.isFetching == true? <Loading />: null }
      </View>
    );   } } export default ParkScreen

Loading.js

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

export default class Loading extends Component {
  render() {
    return (
      <View>
          <ActivityIndicator color="white" />
          <Text>Loading...</Text>
      </View>
    )
  }
}

ProductStore.js

import { observable, action, runInAction } from "mobx";
import axios from 'axios';

export default class ProductStore {

  @observable isFetching = false;

  @action getProductDetails = () => {
    this.isFetching = true;
    console.log(location_number);
    axios.get('http://192.168.1.9/v1/details/')
      .then(response => {
        console.log(response.data);
        this.isFetching = false;
      }).catch(error => {
        console.log(error);
        this.error = error
        this.isFetching = false
      });
  }

}

谢谢您的帮助。

0 个答案:

没有答案