Mobx 注入器商店在 React Native 应用程序中不可用

Question

我收到错误"MobX 注入器：存储'系统商店'不可用！确保它由某个提供商提供。我真正需要做的是将存储传递给我的所有组件，以便我可以在 this.props.systemStore 中访问它们，例如 componentWillMount

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';
import {NavigationActions} from 'react-navigation'
import RootNavigation from './navigation/RootNavigation';
import { inject,  observer, Provider } from 'mobx-react';
import { observable, action } from "mobx";
import SystemStore from "./stores/SystemStore";

class Main extends React.Component {
render() {
  return (
      <Provider systemStore={SystemStore} >
          <App />
      </Provider>
    );
   }
 }

@inject("systemStore")
export default class App extends React.Component {

state = {
  isLoadingComplete: false,
};
render() {
 if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
  return (
    <AppLoading
      startAsync={this._loadResourcesAsync}
      onError={this._handleLoadingError}
      onFinish={this._handleFinishLoading}
    />
  );
} else {
  return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          {Platform.OS === 'android' &&
            <View style={styles.statusBarUnderlay} />}
          <RootNavigation />
        </View>
  );
}
}


_loadResourcesAsync = async () => {
  return Promise.all([
  Font.loadAsync([
    // This is the font that we are using for our tab bar
    Ionicons.font,
    // We include SpaceMono because we use it in HomeScreen.js. Feel free
    // to remove this if you are not using it in your app
    { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf') },
  ]),

  Asset.loadAsync([
    require('./assets/images/robot-dev.png'),
    require('./assets/images/robot-prod.png'),
  ]),
 ]);
};
 _handleLoadingError = error => {
   console.warn(error);
};
  _handleFinishLoading = () => {
   this.setState({ isLoadingComplete: true });
};
}
 const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
 },
 statusBarUnderlay: {
  height: 24,
    backgroundColor: 'rgba(0,0,0,0.2)',
    },
});
Expo.registerRootComponent(Main);

商店看起来像这样

import {observable, action, computed} from 'mobx'
class SystemStore {
@observable loggedIn    = false; 
@observable controlAuth = false;
@observable testingKey = "Testing-Yo"
}
export default new SystemStore()

我一直在寻找解决方案，只是似乎无法解决这个问题。

Answer 1

所以我如何处理这个问题，我创建了一个名为 stores 的文件.js它看起来像这样：

import SystemStore from './stores/systemStore';
const systemStore = new SystemStore();
export {
  SystemStore
}
export default {
  systemStore
}

在此文件中，我导入

和导出我的所有商店，以便我始终可以通过导入我的商店来调用stores.systemStore(以及您拥有的所有其他商店.js如下所示

import React from 'react';
import {observer} from 'mobx-react';
import stores from './../../stores';
@observer
class TestComponent extends React.Component {
  constructor(props){
    super(props);
  }
    
  render() {
    return (
      <div>
        {stores.systemStore.testingKey}
      </div>
    );
  }
}
export default TestComponent;

我的商店看起来像这样：

import store from 'store';
import {observable, action, computed} from 'mobx';
class systemStore {
  
  @observable loggedIn = false; 
  @observable controlAuth = false;
  @observable testingKey = "Testing-Yo";
}
export default systemStore;

我希望这对你有帮助。它对我有用:)