javascript - 如何在本例中准确使用react-navigation

Question

我正在尝试学习 react 导航。目前我遇到了错误:

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>
    );
  }

}

我不确定如何将 StackNavigator 传递到 index.android.js 中的 TestComponent 。我尝试将其作为属性传递，如下所示: <TestComponent store={DemoStore} navigation={nav}/>但这也行不通。

运行于:

1. "react-native": "0.48.1",
2. "react-navigation": "^1.0.0-beta.15"

谢谢。

Answer 1

我猜你有点困惑。首先，您需要创建导航器，然后在主组件中进行渲染，然后您可以在屏幕组件中对 this.props.navigation 使用react。

示例

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>
    );
  }
}