réagir natif action d'appel de MOBX de classe fournisseur

Question

j'ai mis en place une très simple classe magasin MOBX:

import {observable, action} from 'mobx' 

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

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

export default new TestStore(); 

Ma classe parente (ci-dessous) est l'endroit où le fournisseur est défini. Le problème est dans cette classe que j'ai également besoin de suivre le nom de l'itinéraire de l'onglet en cours qui est actif. Tout fonctionne bien - mon problème est de savoir comment appeler la fonction changeName dans le magasin de la classe parente? Actuellement, this.props.store.changeName est renvoyé comme non défini.

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

Je résolu cette question de restructuration mon application et déplacer tout un niveau - index.js est devenu le suivant et les classes d'origine importé à index.js retour dans:

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;