Невозможно запустить React Native Modalbox, когда данные были успешно возвращены - PullRequest
Новая
       14

Невозможно запустить React Native Modalbox, когда данные были успешно возвращены

0 голосов
/ 30 октября 2018

Я все еще новичок в React Native, я пытаюсь заставить откликаться на native-modalbox, как только данные будут успешно возвращены. Я использую mobX (управление состоянием) и axios (для запросов http). В настоящее время данные успешно возвращаются (отображается в console.log). Я пробовал множество способов перенести модальный режим, как только данные были возвращены без успеха. Я включил основной код ниже. Любая помощь с этим приветствуется.

Спасибо

ShopScreen.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, inject } from "mobx-react";
    import Modal from 'react-native-modalbox';


    @inject("shopStore")
    class ShopScreen extends Component {
      constructor(props: Object) {
        super(props);
        this.state = {
          Validate: true,
          buttonInvalid: true
        };
      }


      render() {
        console.log("Render shop");
        return (
          <View>

            <TouchableOpacity style={
              [{
                paddingTop: 10,
                paddingBottom: 10,
                borderRadius: 5,
                marginBottom: 20,
                width: '70%',
                backgroundColor: '#009688'
              }]
            } activeOpacity={.5}
              onPress={this.props.shopStore.getProducts}
            >
              <Text>Get Products</Text>
            </TouchableOpacity>

            <ShowModal />
          </View>
        );
      }
    }
    export default ShopScreen

    @inject("shopStore")
    @observer
    class ShowModal extends Component {
      render() {
        return (
          <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"}>
            <Text style={styles.text}>Modal centered</Text>     
          </Modal>
        )
      }
    }

ShopStore.js 

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

export default class ShopStore {

  @observable error = [];
  @observable isLoading = false;
  @observable isModalVisible = false;

  @action getProducts = () => {
    this.isLoading = true;
    axios.get('http://192.168.1.9/v1/Products/')
      .then(response => {
        console.log(response.data);
        this.products = response.data;
        this.isLoading = false;
        this.isModalVisible = true;
      }).catch(error => {
        console.log(error);
        this.error = error
        this.isLoading = false
      });
  }

}
...