React Native TabNavigator，无法读取未定义的属性'navigate'

Question

我刚刚设置了一个React Navigation Tabnavigator，它可以正常工作，但是我在视图之间的过渡方面有问题。

单击按钮后，我从试图将用户重定向到另一页的另一个页面中获取以下错误消息。

无法读取未定义的属性

我对如何进行这项工作感到非常困惑。

这是导航器：

import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import ElemList from './src/components/ElemList';
import ElemShow from './src/components/ElemShow';
const RootTabs = TabNavigator({
  Home: {
    screen: ElemList,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-home' : 'ios-home-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
    main: {
      screen: StackNavigator({
        show: { screen: ElemShow },
      })
    }
  }
});

这是我的代码：

onRowPress(data) {
this.props.navigation.navigate('ElemShow', {id: data})
};
render() {
const { key, elem } = this.props;
 return (
  <TouchableWithoutFeedback onPress={() => this.onRowPress(elem)}>
    <View style={styles.viewStyle} key={key}>
      <Text>Here is the info</Text>
    </View>
  </TouchableWithoutFeedback>
 )
}

Answer 1

问题在于此行

this.props.navigation

应该是

this.props.navigator

此外，我不知道navigate是屏幕API的一部分；通常，您将使用push或resetTo。