在这个例子中，如何准确使用反应导航

Question

我正在尝试学习反应导航。目前我遇到了错误：

Cannot read property 'navigate' of undefined
TestComponent.render
    TestComponent.js:17:12
TestComponent.proxiedMethod
    createPrototypeProxy.js:44:29
<unknown>
    ReactNativeStack-dev.js:1863:24
measureLifeCyclePerf
    ReactNativeStack-dev.js:1610:15
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
    ReactNativeStack-dev.js:1862:33
ReactCompositeComponentWrapper._renderValidatedComponent
    ReactNativeStack-dev.js:1872:39
ReactCompositeComponentWrapper.performInitialMount
    ReactNativeStack-dev.js:1696:62
ReactCompositeComponentWrapper.mountComponent
    ReactNativeStack-dev.js:1655:164
Object.mountComponent
    ReactNativeStack-dev.js:1327:38
ReactCompositeComponentWrapper.performInitialMount
    ReactNativeStack-dev.js:1703:39

所以这是我的代码

索引.安卓.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 nav = StackNavigator({
      Home:  {screen: TestComponent},
      Pools: {screen: PoolListComponent}
    });

    return (
      <TestComponent store={DemoStore} />
    )
  }
}
AppRegistry.registerComponent('TestApp', () => TestApp);

测试组件

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

export default class TestComponent extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  constructor(props) {
    super(props);
  }
  render() {
    const { navigate } = this.props.TestApp;
    return (
      <View>
        <Button
          title="Pool overview "
          onPress={() =>
            //navigation.navigate('Pools')
            console.log(this.props.TestApp)
          }
        />
      </View>
    );
  }
}

我不确定如何在index.android.js中将堆栈导航器传递给我的测试组件。我试图像这样将其作为属性传递：<TestComponent store={DemoStore} navigation={nav}/>但这也没有用。

运行于：

1. "反应原生"： "0.48.1"，
2. "反应导航"： "^1.0.0-beta.15"

谢谢。

Answer 1

我想你有点困惑。首先，您需要创建导航器，然后在主组件中渲染，然后您可以在屏幕组件中做出this.props.navigation反应。

例

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

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

---

export default class TestComponent extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  constructor(props) {
    super(props);
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Button
          title="Pool overview "
          onPress={() =>
            navigate('Pools')
          }
        />
      </View>
    );
  }
}