Question

我尝试使用mobx 4 with native native，我在设置锅炉板时遇到了一些问题。

我有以下代码：

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { observer, inject } from "mobx-react";
import { Provider } from 'mobx-react';
import Store from './store';

import { StackNavigator } from 'react-navigation';
import ProductScreen from './screens/ProductScreen';

const AppNavigator = StackNavigator({
  ProductScreen: { screen : ProductScreen }
})

export default class App extends React.Component {
  render() {
      return (
        <Provider store={Store}>
          <AppNavigator />
        </Provider>
      );
  }
}

存储/ index.js

import { observable } from 'mobx'
import ProductStore from './ProductStore'

class Store {
    constructor() {
        this.ProductStore= new ProductStore(this)
    }
}
export default Store

存储/ ProductStore.js

import { runInAction, extendObservable, action } from "mobx";

export default extendObservable(this, {
  products: [],
  loading: false,

  loadProducts: action(async () => {
    this.loading = true;
    // fetch data from api
    const response = await fetch("https://random.com/api/?results=10");
    const json = await response.json();
    runInAction(() => {
      this.products = json.results;
      this.loading = false;
    });
  })
});

ProductsScree：

import React, { Component } from 'react';

import {
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  Alert,
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  Animated
} from 'react-native';
import { observer, inject } from "mobx-react";

class ProductsScreen extends Component {

  render() {
    return (
      <View>
        <Text>
          <button onPress={this.props.Store.loadProducts} title="Get Products" />
        </Text>

      </View>
    );
  }
}
export default ProductsScreen;

我希望能够在按下按钮时触发函数loadProducts，并且能够访问数据（产品，加载变量）。任何帮助都将不胜感激。或者，我将使用observable和inject重写代码。

由于

无法设置mobx 4与native native一起使用

0 个答案: