用导航和装饰器反应原生 Mobx 会引发错误

Question

当我尝试使用 React Native Single Store 时。注入 Home 组件后，商店在 Home 组件的 props 中不可见。

通过显示 Home 组件的 props，我无法访问使用 Provider 从 App.js 传递给 Home 组件的商店。

GitHub 链接：https://github.com/FreelancerAnkit/Mobx1

请帮忙！

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>
      );
   }

}

预期结果： alert this.props 应该显示我的商店，但它没有我的商店由 Mobx 的提供者传递

Answer 1

最好用这个

2021 年 5 月更新

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

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

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