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; 

구간 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 표시 할 경로 설정의 첫 번째 경로를 선택합니다 사용하고 있습니다. 첫 번째 경로의 화면은 TestComponent입니다.

모든 화면 구성 요소에 소품을 전달하려면 screenProps을 사용하십시오.

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

각 구성 요소 내 this.props.screenProps.store를 사용하여 상점에 액세스 할 수 있습니다.