React Native在React Navigation6.0版本如何实现动态路由

代码语言：javascript复制

//在这里配置页面的路由
import PopularPage from '../page/PopularPage';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TrendingPage from '../page/TrendingPage';
import FavoritePage from '../page/FavoritePage';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import React from 'react';
import {DefaultTheme, NavigationContainer} from '@react-navigation/native';

const Tab = createBottomTabNavigator();

const TABS = [
  {
    name: 'PopularPage',
    component: PopularPage,//写好的路由组件
    options: {
      tabBarLabel: '最热',
      tabBarIcon: ({color, size}) => (
        <MaterialIcons name={'whatshot'} size={26} />
      ),
    },
  },
  {
    name: 'TrendingPage',
    component: TrendingPage,
    options: {
      tabBarLabel: '趋势',
      tabBarIcon: ({color, size}) => (
        <MaterialIcons name={'trending-up'} size={26} />
      ),
    },
  },
  {
    name: 'FavoritePage',
    component: FavoritePage,
    options: {
      tabBarLabel: '收藏',
      tabBarIcon: ({color, size}) => (
        <MaterialIcons name={'favorite'} size={26} />
      ),
    },
  },
];

//动态底部栏
function DynamicTabNavigator(props) {
  // const {_PopularPage, _TrendingPage, _FavoritePage} = TABS;
  console.log(props);
  return (
    <NavigationContainer
      independent={true}
      theme={{
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          primary: props.theme,
        },
      }}>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        {TABS.map(tab => {
          console.log(tab);
          return (
            <Tab.Screen
              name={tab.name}
              component={tab.component}
              options={tab.options}
              onNavigationStateChange={(prevState, newState, action) => {}}
            />
          );
        })}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default DynamicTabNavigator;

native

0 人点赞