在这个例子中如何准确地使用 react-navigation

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

这是我的代码

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 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 中将 StackNavigator 传递给我的 TestComponent。我试图将它作为这样的属性传递：<TestComponent store={DemoStore} navigation={nav}/> 但这也不起作用。

运行时间：

1. "react-native": "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>
    );
  }
}