UI :找不到变量索引(BottomNavigation)

Question

实际上，我试图使用来自UI Kitty的UI Kitty，但是当我试图从一个导航选项卡切换到另一个导航选项卡时，应用程序崩溃时会出现以下错误：

找不到变量索引

下面是我使用索引的BottomNavigation代码

import React from 'react';
import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Dashboard from '../navigation/Dashboard';
import Settings from '../navigation/Settings';

export const BottomNavigationShowcase = (props) => {


 const onTabSelect = (selectedIndex) => {
   const { [index] : selectedRoute } = props.navigation.state.routes; // INDEX IS USED HERE
   props.navigation.navigate(selectedRoute.routeName);
 };

 return (
   <BottomNavigation
     selectedIndex={props.navigation.state.index}
     onSelect={onTabSelect}>
     <BottomNavigationTab title='Dashboard' />
     <BottomNavigationTab title='Settings' />
   </BottomNavigation>
  );
}

export const BottomTabNavigator = createBottomTabNavigator({
  Dashboard: Dashboard,
  Settings: Settings,
}, {
  initialRouteName: 'Dashboard',
  tabBarComponent: BottomNavigationShowcase,
});

export default createAppContainer(BottomTabNavigator)

这是App.JS

import NavigationContainer from './components/BottomNavigation';

const App: () => React$Node = () => {

  return (
    <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <IconRegistry icons={EvaIconsPack} />
    <Header/>
    <NavigationContainer/>
    </ApplicationProvider>
  );
};

Answer 1

在const { [index] : selectedRoute } = props.navigation.state.routes; // INDEX IS USED HERE中似乎存在一个问题，这不是读取对象的正确方法。好像你想看看道具上的路线。为什么不做些类似的事

 const routes = props.navigation.state.routes;
 const selectedRoute = routes[selectedIndex];
 props.navigation.navigate(selectedRoute.routeName);

这将修复由于找不到index而崩溃的应用程序。