在此示例中，如何正确使用反应导航

Question

I am trying to learn react-navigation. At the moment I am getting stuck with the error:

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

So here is my code

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

TestComponent

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

}

I am not sure how to pass the StackNavigator on to my TestComponent in index.android.js . I tried to pass it as a property like so: <TestComponent store={DemoStore} navigation={nav}/> but this also didn't work.

Running on:

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

Thanks.

Answer 1

I guess you are a bit confused. First you need to create your navigator and then render in your main component and then you can react this.props.navigation in your screen components.

Example

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