react-native 来自提供商的 mobx 调用操作 class

Question

我已经建立了一个非常简单的 mobx 商店 class:

import {observable, action} from 'mobx'

class TestStore {
  @observable placeholder = 'Search In Me';

  @action changeName(name) {
this.placeholder = name;
  }
}

export default new TestStore();

我的parentclass（下）是设置提供者的地方。问题出在这个 class 我还需要跟踪当前处于活动状态的选项卡的路由名称。一切正常 - 我的问题是如何从 parent class 调用商店中的 changeName 函数？当前 this.props.store.changeName 返回为未定义。

import React, { Component } from 'react';
import { Root, Tabs } from './config/router';
import { Alert,View } from 'react-native';

import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';

import {observer} from "mobx-react/native";



@observer class App extends Component {


_getCurrentRouteName(navState) {

if (navState.hasOwnProperty('index')) {
    this._getCurrentRouteName(navState.routes[navState.index])

} else {
    if (navState.routeName==='Tab 1') {
        Alert.alert('Tab 1')
        this.props.store.changeName('Tab 1')
    }
    if (navState.routeName==='Tab 2') {
        Alert.alert('Tab 2')
    }
    if (navState.routeName==='Tab 3') {
        Alert.alert('Tab 3')

    }
    if (navState.routeName==='Tab 4') {
        Alert.alert('Tab 4')

    }

}

}

  render() {
    return (

     <Provider store={TestStore}>
    <Root onNavigationStateChange={(prevState, newState) => {
        this._getCurrentRouteName(newState)

    }}  />
     </Provider>

    )


  }
 }

export default App;

Answer 1

所以我解决了这个问题重组我的应用程序并将所有内容都提升了一个级别 - index.js 变成了以下内容并将 index.js 中的原始类导入回：

import React, { Component } from 'react';
import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';


import Base from './app';

class App extends Component {

  render() {
    return (

    <Provider store={TestStore}>
    <Base />
     </Provider>

    )


  }
}

export default App;

react-native 来自提供商的 mobx 调用操作 class

react-native mobx call action from provider class

react-native

mobx-react