React Native TabNavigator，无法读取undefined的属性'navigate'

Question

我刚刚设置了一个React Navigation TabNavigator，它运行正常，但是我的视图之间有过渡问题。

单击按钮后，我尝试将用户重定向到另一个页面时收到以下错误消息。

无法读取undefined的属性'navigate'

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

这是导航器：

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。