javascript - Mobx 注入(inject)器存储在 React Native 应用程序中不可用

Question

我收到一个错误消息“MobX 注入(inject)器:存储‘systemStore’不可用!确保它是由某个提供商提供的。我真正需要做的是将存储传递给我的所有组件，以便我可以访问它们在 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(以及你拥有的所有其他商店)，只需像这样导入我的 stores.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;

希望对您有所帮助。它对我有用:)