Объедините StackNavigator с реквизитом Mobx

Question

Я пытаюсь использовать StackNavigator вместе с MobX. Вот где я застреваю.

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;

Приведенный выше код работает. Под этим я подразумеваю, что 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 выбирает первый маршрут в конфигурации маршрута для отображения. Первый маршрут имеет экран, состоящий из TestComponent,

Для передачи реквизита всем компонентам экрана используйте screenProps.

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

Доступ к хранилищу можно получить с помощью this.props.screenProps.store в каждом компоненте.