安装createMaterialTopTabNavigator 嵌套进bottomsTab 报错

Question

安装createMaterialTopTabNavigator 嵌套进bottomsTab 报错

import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Home from '@/pages/Home';
const Tab = createMaterialTopTabNavigator();

class HomeTabs extends React.Component {

  render() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
    )
  }
}

export default HomeTabs;
----------------------------------------------------------------
import React from 'react';
import { NavigationContainer, TabNavigationState, RouteProp } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {RootStackNavigation, RootStackParamList} from './index'
import HomeTabs from './HomeTabs.tsx';
import Icon from '@/assets/iconfont';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';

type Route = RouteProp<RootStackParamList, 'BottomTabs'> & {
  state?: TabNavigationState
}
interface IProps {
  navigation: RootStackNavigation,
  route: Route
}

export type BottomTabParamList = {
  HomeTabs: undefined;
  Listen: undefined;
  Found: undefined;
  Account: undefined;
}

const Tab = createBottomTabNavigator<BottomTabParamList>();

function getHeaderTitle(route: Route) {
  const routeName = route.state ? route.state.routes[route.state.index].name : route.params?.screen || 'HomeTabs';
  const map = new Map([
    ['HomeTabs', '首页'],
    ['Listen', '我听'],
    ['Found', '发现'],
    ['Account', '我的'],
  ])
  return map.get(routeName) 
}

class BottomTabs extends React.Component<IProps> {
  componentDidUpdate() {
    const {navigation, route} = this.props;
    console.log('--->', route)
    navigation.setOptions({
      headerTitle: getHeaderTitle(route)
    })
  }
  render() {
    return(
        <Tab.Navigator tabBarOptions={{
          activeTintColor: '#f86442'
        }}>
          <Tab.Screen options={{ headerTitle: '首页', tabBarIcon: ({color, size}) => (
              <Icon name="icon-shouye" color={color} size={size} />
            ), }}  name="HomeTabs" component={HomeTabs} /> 
          <Tab.Screen options={{ headerTitle: '我听', tabBarIcon: ({color, size}) => (
              <Icon name="icon-shoucang" color={color} size={size} />
            ), }} name="Listen" component={Listen} />
          <Tab.Screen options={{ headerTitle: '发现', tabBarIcon: ({color, size}) => (
              <Icon name="icon-faxian" color={color} size={size} />
            ), }} name="Found" component={Found} />
          <Tab.Screen options={{ headerTitle: '我的', tabBarIcon: ({color, size}) => (
              <Icon name="icon-user" color={color} size={size} />
            ), }} name="Account" component={Account} />
        </Tab.Navigator>
    )
  }
}

export default BottomTabs;

package.json
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.1.1",
    "@react-navigation/material-top-tabs": "^5.1.4",
    "@react-navigation/native": "^5.0.8",
    "@react-navigation/stack": "^5.1.0",
    "@types/react-redux": "^7.1.22",
    "babel-plugin-module-resolver": "^4.1.0",
    "dva-core-ts": "^2.0.7",
    "dva-loading-ts": "^3.0.23",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-config": "^1.4.5",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-reanimated": "^2.4.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.11.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^2.13.0",
    "react-redux": "^7.2.6"

Answer 1

今朝 2025-01-18 00:00:53

最好是使用createBottomTabNavigator，而不是createMaterialTopTabNavigator嵌套buttonTabs