TabNavigator не переключает вкладки. навигация. навигация не является функцией - PullRequest
Новая
       47

TabNavigator не переключает вкладки. навигация. навигация не является функцией

0 голосов
/ 07 мая 2018

Я только начал новый проект и добавил 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',
  }
);

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Я думал, что проблема в вашей навигации. 

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>
    );
  }
}

Щелкните по этой ссылке . Это официальный документ, который поможет вам.

0 голосов
/ 07 мая 2018

Понижение версии React-навигация с 2.0.0 до 1.0.3 решает проблему.

0 голосов
/ 07 мая 2018

Это то, что я использую для изменения Tab .

Это определение моего обычая. Таб.

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>);
            })
            }
...