StackNavigatorとMobxの小道具を組み合わせる

Question

MobXとStackNavigatorを併用しようとしています。ここで私は立ち往生します。

index.android.js

import React, {Component} from 'react'; 
import {AppRegistry} from 'react-native'; 
import DemoStore from './src/stores/DemoStore'; 
import { StackNavigator } from 'react-navigation'; 
import PoolListComponent from "./src/components/PoolListComponent"; 
import TestComponent from "./src/components/TestComponent"; 

export default class TestApp extends Component { 
    render() { 
    const Navigator = StackNavigator({ 
     Home: {screen: TestComponent}, 
     Pools: {screen: PoolListComponent} 
    }); 

    return (
     <Navigator store={DemoStore} /> 
    ) 
    } 
} 

AppRegistry.registerComponent('TestApp',() => TestApp); 

TestComponent.js

import React, {Component} from 'react'; 
import {observer} from 'mobx-react'; 
import {Button, StyleSheet, View} from 'react-native'; 

@observer 
export default class TestComponent extends Component { 

    static navigationOptions = { 
    title: 'Home', 
    }; 

    render() { 
    const { navigate } = this.props.navigation; 
    console.log(this.props.store) 
    return (
     <View> 
     <Button 
      title="Pool overview " 
      onPress={() => 
      navigate('Pools') 
      // Poolsconsole.log(this.props.TestApp) 
      } 
     /> 
     </View> 
    ); 
    } 

} 

Demostore

import {observable } from 'mobx'; 

class DemoStore{ 

    @observable name = 'Demo demo'; 
    @observable pools = []; 
} 

const demoStore = new DemoStore(); 
export default demoStore; 

AB oveコードが動作します。これで、アプリケーションをロードするときにTestComponentが画面に表示されることを意味します。

1. どうindex.android.jsはそれがTestComponentをロードするために持っていることを知っているん：

   しかし、私は次のような質問がありますか？

2. TestComponent'sレンダリング方法では、console.log(this.props.store)がundefinedを出力します。すべてのコンポーネントで使用できるように店舗を正しく挿入するにはどうすればよいですか？だから、あなたは私の例で見ると、それはTestComponentで利用可能であるべきとPoolListComponent
レコードの場合

： 私は

"mobx": "^3.3.1", 
"mobx-react": "^4.3.3", 
"react": "16.0.0-alpha.12", 
"react-navigation": "^1.0.0-beta.15" 

Answer 1

index.android.jsを使用していますが、表示するルートの設定で最初のルートを選びます。第1の経路は、TestComponentで構成される画面を有する。

すべての画面コンポーネントに小道具を渡す場合は、screenPropsを使用してください。

<Navigator screenProps={{ store: DemoStore }} /> 

各コンポーネント内でthis.props.screenProps.storeを使用してストアにアクセスできます。