使用TabNavigator时,React native不识别导航对象

时间:2018-03-10 17:03:58

标签: react-native

我是React Native的新手,所以我为无知而道歉。

请参阅下面的代码......当它到达时     const {routeName} = navigation.state; ....它给出错误[TypeError:无法读取未定义的属性'routeName'。

我可以看到导航对象包含一个“状态”对象....并且该对象包含一个routeName键(名为“Search”)....所以为什么它不识别。

感谢您的帮助

import React, { Component } from 'react';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import { Platform } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import Search from '../screens/Search';
import Profile from '../screens/Profile';


export const Tabs = TabNavigator(
{
  Search: {
    screen: Search,
    navigationOptions:{
        tabBarLabel:'Search'
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions:{
        tabBarLabel:'Me'
    },
  }
}, //end of 1st object/arg passed to TabNavigator
{
  navigationOptions: ( navigation ) => ({
    tabBarIcon: ({ focused, tintColor }) => {
      const { routeName } = navigation.state;
      let iconName;
      if(routeName === 'Search'){
        iconName = "ios-information-circle" + (focused ? "" : "-outline");
      } else if (routeName === 'Profile') {
        iconName = "ios-options" + (focused ? "" : "-outline");
      }

  return <Ionicons name={iconName} size = {25} color = {tintColor} />;
    }, //end tabBarIcon
  }), //end navigationOptions

  tabBarOptions: {
    activeTintColor: 'tomato',
    inactiveTintColor: 'gray'
  },

  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: false,
  swipeEnabled: false

} //end 2nd arg/object passed to TabNavigator
); //end TabNavigator

1 个答案:

答案 0 :(得分:1)

想出来......传递给navigationOptions的导航参数周围缺少大括号。 纽比错误:))