使用Native Base自定义TabNavigator时出现props.navigation.navigate不是函数错误

我帮你排查了代码里的问题，主要有两个关键点导致这个错误：

1. 路由名称匹配错误 #

你在自定义底部Tab的第二个Button里写了：

onPress={() => props.navigation.navigate('CameraRouter')}

但你在createBottomTabNavigator里定义的路由名称是Camera（对应的screen组件才是CameraRouter），路由跳转必须使用你定义的路由名称，而不是组件名。所以这里应该改成：

onPress={() => props.navigation.navigate('Camera')}

2. 确保正确获取navigation对象 #

虽然react-navigation会自动给tabBarComponent注入navigation props，但通过解构props的方式可以更清晰地确保获取正确，避免潜在的嵌套props问题：

tabBarComponent: ({ navigation }) => {
  return (
    <Footer>
      <FooterTab>
        <Button vertical onPress={() => navigation.navigate('Feed')}>
          <Icon name="bowtie" />
          <Text>Lucy</Text>
        </Button>
        <Button vertical onPress={() => navigation.navigate('Camera')}>
          <Icon name="briefcase" />
          <Text>Nine</Text>
        </Button>
        <Button vertical>
          <Icon name="headset" />
          <Text>Jade</Text>
        </Button>
      </FooterTab>
    </Footer>
  );
}

修改后的完整MainRouter代码 #

import { createBottomTabNavigator } from 'react-navigation'; 
import React from 'react'; 
import { Button, Text, Icon, Footer, FooterTab } from 'native-base'; 
import CameraRouter from './CameraRouter'; 
import Feed from '../components/Feed'; 

const MainRouter = createBottomTabNavigator(
  { 
    Feed: { 
      screen: Feed, 
    }, 
    Camera: { 
      screen: CameraRouter, 
      navigationOptions: { 
        tabBarVisible: false, 
      }, 
    }, 
  }, 
  { 
    tabBarComponent: ({ navigation }) => { 
      return ( 
        <Footer> 
          <FooterTab> 
            <Button vertical onPress={() => navigation.navigate('Feed')}> 
              <Icon name="bowtie" /> 
              <Text>Lucy</Text> 
            </Button> 
            <Button vertical onPress={() => navigation.navigate('Camera')}> 
              <Icon name="briefcase" /> 
              <Text>Nine</Text> 
            </Button> 
            <Button vertical> 
              <Icon name="headset" /> 
              <Text>Jade</Text> 
            </Button> 
          </FooterTab> 
        </Footer> 
      ); 
    } 
  } 
); 

export default MainRouter;

这样修改后，应该就能解决props.navigation.navigate is not a function的错误了，核心就是确保跳转的路由名称和你在createBottomTabNavigator里定义的一致，同时正确获取navigation对象。

内容的提问来源于stack exchange，提问作者Alexander Valtingojer