Question

我已经设置了一个非常简单的mobx商店类：

import {observable, action} from 'mobx'

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

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

export default new TestStore();

我的父类（下面）是设置提供程序的位置。问题出在这个类中我还需要跟踪当前活动选项卡的路由名称。一切正常 - 我的问题是如何从父类调用商店中的changeName函数？目前this.props.store.changeName以undefined形式返回。

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调用操作

1 个答案: