reactjs - 用户界面小猫 : can't find variable index (BottomNavigation)

Question

实际上我正在尝试使用UI Kitty中的BottomNavigation但是当我尝试从一个导航选项卡切换到另一个导航选项卡时，应用程序崩溃并出现以下错误:

can't find variable index

这是来自 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 似乎有问题 这不是读取对象的正确方法。 看来你想从 Prop 中读取路线。为什么不做类似的事情

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

这应该可以修复应用程序因找不到 index 而崩溃的问题