UI小猫：找不到变量索引（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似乎有问题这不是读取对象的正确方法。似乎您想从道具中读取路线。为什么不做类似

的事情

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

这应该可以解决应用程序因未找到 index

而崩溃的问题

UI小猫：找不到变量索引（BottomNavigation）

UI Kitten: can't find variable index (BottomNavigation)

reactjs

react-native

react-native-ui-kitten