React Native TabNavigator，无法读取未定义的属性“导航”

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。