TabNavigator 不切换选项卡。 navigation.navigate 不是函数

Question

我刚刚开始了一个新项目并添加了一个 TabNavigator。当我点击任一选项卡时，我收到一个红色错误说明：

"navigation.navigate is not a function(In 'navigation/navigate(navigateion.state.routes[index].routeName', 'navigation.navigate' is undefined)"

如果我更改初始路线，每个选项卡都会在屏幕上正确显示，并在屏幕底部突出显示正确的选项卡。

export default TabNavigator(
  {
    Home: { screen: HomeScreen },
    Card: { screen: CardScreen },
    Schedule: { screen: ScheduleScreen },
  },
  {
    initialRouteName: 'Home',
  }
);

Answer 1

将 React-navigation 从 2.0.0 降级到 1.0.3 解决了这个问题。

Answer 2

这就是我用来更改标签的方法。

这是我的customeTab的定义

const customeTab = ({ navigation }) => {

下面是导航代码：

const routes = navigation.state.routes;
            {routes.map((route, index) => {
                return (
                    <TouchableOpacity
                        activeOpacity={1.0}
                        onPress={() => {
                            navigation.navigate(route.key);
                        }
                        }
                        style={styles.tab}
                        key={route.key}
                    >
         // do you stuff to show title and image.
                    </TouchableOpacity>);
            })
            }

Answer 3

我认为问题出在您的导航上。

import { TabNavigator } from 'react-navigation';
import HomeScreen from "./Home"
import SettingsScreen from "./Settings"

export default TabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

如果你想将一个页面转移到另一个页面，你必须使用导航方法。

在标签之间跳转 从一个选项卡切换到另一个选项卡有一个熟悉的 API - this.props.navigation.navigate。

import { Button, Text, View } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          title="Go to Settings"
          onPress={() => this.props.navigation.navigate('Settings')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </View>
    );
  }
}

点击link。这是一份可以帮助您的官方文档。