Почему я не могу добавить хранилище MobX в дочерний компонент?

Question

Я использовал MobX в React, но впервые в React-Native

Так что у меня есть вопрос.

Это моя простая структура:

■ Навигатор вкладок с навигатором стека, например this

■ Некоторые компоненты экрана (<SettingScreen/>) (это родительский компонент)

■ Компонент экрана имеет некоторые дочерние компоненты (<HourPicker/>)

Магазин Mobx хорошо работает с экранными компонентами.

Но в моем дочернем компоненте (<HourPicker/> ) Я получил это сообщение об ошибке.

Мне не удалось добавить хранилище MobX в мой дочерний компонент.

Вот мои коды:

■ Приложение. js

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import TabNavigator from './navigator/TabNavigator'
import { Provider } from 'mobx-react'
import store from './Store'

export default function App() {
  return (
    <Provider store={store}>
      <TabNavigator />
    </Provider>
  )
}

■ Store. js

import { action, observable } from 'mobx'

class Store {
  @observable testName = 'testteststest'
  @observable isStarted = false
  @observable startTime = null
  @observable endTime = null
  @observable timeUnit = 16
}
const store = new Store()
export default store

■ SettingScreen. js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import { inject, observer } from 'mobx-react'
import Modal, { ModalContent } from 'react-native-modals'
import HourPicker from '../components/HourPicker'

export default class SettingScreen extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
    <View style={styles.container}>
      {this.myRender()}
    </View>
    )
  }

  myRender = () => {
    return (
      <Modal visible={true}>
        <ModalContent>
          {console.log('SettingScreen', this.props)}
          <HourPicker />
        </ModalContent>
      </Modal>
    )
  }
}

■ Хранится реквизит компонента SettingScreen. (Работает хорошо)

Object {
 "navigation": Object {
 ...
 },
 "store": Store {
   "endTime": null,
   "isStarted": false,
   "startTime": null,
   "testName": "testteststest",
   "timeUnit": 16,
   Symbol(mobx did run lazy initializers): true,
   Symbol(mobx administration): ObservableObjectAdministration {
     "defaultEnhancer": [Function deepEnhancer],
     "keysAtom": Atom {
       "diffValue": 0,
       "isBeingObserved": false,
       "isPendingUnobservation": false,
       "lastAccessedBy": 0,
       "lowestObserverState": 2,
       "name": "Store@2.keys",
       "observers": Set {},
     },**
     "name": "Store@2",
     "target": [Circular],
     "values": Map {
       "testName" => "testteststest",
       "isStarted" => false,
       "startTime" => null,
       "endTime" => null,
       "timeUnit" => 16,
     },
   },
 },
}

■ HourPicker . js

import React from 'react'
import { View, Picker, StyleSheet, Text, Platform } from 'react-native'
import { inject, observer } from 'mobx-react'

@inject('store')
@observer
export default class HourPicker extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View style={styles.container}>
        {console.log('HourPicker', this.props)}
      </View>
    )
  }
}

Итак, я проверил про HourPicker ps но ничего не имеет.

■ реквизиты <HourPicker/>

 HourPicker Object {}

Я знаю решение (передача магазина ребенку ( <HourPicker/>) component).

Но я хочу знать 'Почему я не могу вставить хранилище в дочерний компонент?' и «Что правильно?»