Question

我正在尝试将StackNavigator与MobX一起使用。这是我被卡住的地方。

index.android.js

generated/

TestComponent.js

svn

Demostore

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出现在屏幕上。

但是，我有以下问题：

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> ); } }如何知道必须加载import {observable } from 'mobx'; class DemoStore{ @observable name = 'Demo demo'; @observable pools = []; } const demoStore = new DemoStore(); export default demoStore;？
在index.android.js渲染方法中，TestComponent打印TestComponent's。如何正确注入商店以使其可用于所有组件？因此，当您查看我的示例时，它应该可以在console.log(this.props.store)和undefined

记录：我正在使用

TestComponent

Answer 1

index.android.js选择要显示的路线配置中的第一条路线。第一条路线的屏幕由TestComponent组成。

要将道具传递给所有屏幕组件，请使用screenProps。

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

可以使用每个组件中的this.props.screenProps.store访问商店。

将StackNavigator与Mobx道具相结合

1 个答案: