react-native 配置底部导航栏和路由

1.新增路由文件和底部导航栏文件， /src/route/index.tsx 、 /src/components/BottomTabs/BottomTabs.tsx

image.png

2. /src/components/BottomTabs/BottomTabs.tsx

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import Index from '../../views/Index/Index';
import Mine from '../../views/Mine/Mine';
import Classify from '../../views/Classify/Classify';

import {Icon} from '@rneui/themed';

export type BottomTabParamList = {
  Index: undefined;
  Mine: undefined;
  Classify: undefined;
};

const Tab = createBottomTabNavigator<BottomTabParamList>();

function BottomTabs() {
  return (
    <Tab.Navigator
  //    screenOptions={({route}) => ({
  //      tabBarIcon: ({focused, color, size}) => {
   //       let iconName = '';

    //      if (route.name === 'Index') {
      //      iconName = focused ? 'add-circle' : 'add-circle-outline';
      //    } else if (route.name === 'Classify') {
      //      iconName = focused ? 'person' : 'person-outline';
      //    }
      //    return <Icon name={iconName} size={size} color={color} />;
      //  },
      //})}
      >
      <Tab.Screen
        name="Index"
        component={Index}
        options={{
          headerShown: false,
          tabBarLabel: '首页',
          tabBarIcon: ({color, size}) => (
            <Icon name="delete" color={'#e00000'} size={30} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Classify"
        component={Classify}
        options={{
          tabBarLabel: '分类',
          tabBarIcon: ({color, size}) => (
            <Icon name="delete" color={'#e00000'} size={30} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Mine"
        component={Mine}
        options={{
          tabBarLabel: '我的',
          tabBarIcon: ({color, size}) => (
            <Icon name="delete" color={'#e00000'} size={30} />
          ),
          tabBarBadge: 3,
        }}
      />
    </Tab.Navigator>
  );
}

export default BottomTabs;

3. /src/route/index.tsx

import {
  createStackNavigator,
  StackNavigationProp,
} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

import Index from '../views/Index/Index';
import Mine from '../views/Mine/Mine';
import Classify from '../views/Classify/Classify';
import Detail from '../views/Detail/Detail';
import BottomTabs from '../components/BottomTabs/BottomTabs';

type RootStackParamList = {
  BottomTabs: undefined; // 这里改一下
  Detail: undefined;
};

export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Index"
        screenOptions={{
          headerTitleAlign: 'center',
        }}>
        <Stack.Screen
          name="BottomTabs"
          component={BottomTabs}
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

4. 在app.tsx里引入route。

   
   
   image.png