2

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

找不到变量索引

这是我使用索引的 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>
  );
};
4

1 回答 1

3

似乎存在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

于 2019-10-07T14:47:40.780 回答