我一直在尝试使ActivityIndicator在发出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
});
}
}
谢谢您的帮助。