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

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

}

我不确定如何将StackNavigator传递给index.android.js中的TestComponent。我试图把它作为一个属性传递给它：<TestComponent store={DemoStore} navigation={nav}/>但这也没有用。

继续：

＆＃34; react-native＆＃34;：＆＃34; 0.48.1＆＃34;，
＆＃34; react-navigation＆＃34;：＆＃34; ^ 1.0.0-beta.15＆＃34;

感谢。

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

如何在此示例中准确使用react-navigation

1 个答案: