用导航和装饰器反应本机Mobx会引发错误

Question

When im trying to use React Native Single Store. After injecting into Home Component the store is not visible in props of Home component.

By displaying the props of Home component im not able to access the store that was passed to Home component from App.js using Provider.

GitHub Link: https://github.com/FreelancerAnkit/Mobx1

Please do help!

Store.js

import {observable, action} from 'mobx';

class TestStore {
  @observable loading = true;
  @observable count = 123 ;

  @action loadingCompleted() {
    this.loading = false;
  }

  @action toggleLoading() {
    this.loading = this.loading ? false : true;
  }
}

export default new TestStore();

App.js

import React, {Component} from 'react';
import { Provider, inject, observer  } from "mobx-react/native";
import Home from './app/Home';
import store from "./app/TestStore";

class App extends Component{

  render(){
    return (
      <Provider {...{store: store}}>
        <Home />
      </Provider>
    )
  }
}

export default App;

Home.js

import {inject, observer} from "mobx-react/native";
import React from "react";
import { ActivityIndicator,View, Text } from "react-native";

@inject('store') @observer
export default class Home extends React.Component {

   componentDidMount() {
     alert(JSON.stringify(this.props))
   }
   render() {
      return (
         <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <Text>Landing Page</Text>
         </View>
      );
   }

}

Expected Result: alert this.props should show my store but it does not have my store passed by Provider of Mobx

Answer 1

it's better to use this

import { Provider } from 'mobx-react/native'

....

<Provider { ...Store }>
    <Login />
  </Provider>