底部导航TabBarIcon呈现方法是错误的?

Question

我尝试创建底部导航，
以下链接:https://reactnavigation.org/docs/tab-based-navigation/#customizing-the-appearance

下面是我的代码:

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons";
// Screens
import Home from "./Home";
import Settings from "./Settings";
const Tab = createBottomTabNavigator();
function MainContainer({ navigation }) {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "Home") {
iconName = focused
? "ios-information-circle"
: "ios-information-circle-outline";
} else if (route.name === "Settings") {
iconName = focused ? "ios-list-box" : "ios-list";
}
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: "tomato",
tabBarInactiveTintColor: "gray",
})}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
);
}
export default MainContainer;

但是我得到了这个错误:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `TabBarIcon`.

我发现了错误，
就上了import Ionicons from "react-native-vector-icons";应该是import Ionicons from "react-native-vector-icons/Ionicons"

Answer 1

解决方案:

您需要将<Tab.Navigator>包装到根导航容器

例子:

您需要首先安装@react-navigation/native的依赖项

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const MainContainer = () => {
return (
<NavigationContainer>

<Tab.Navigator />
<Stack.Navigator />
...other your navigation
</NavigationContainer>
);
};

你可以签出react- navigation https://reactnavigation.org/docs/getting-started/

Answer 2

将<Tab.Navigator>包裹在<NavigationContainer>中

import React from "react";
import { NavigationContainer } from '@react-navigation/native'
//Reset Imports

const Routes = () => {
return (
<NavigationContainer>
<Tab.Navigator>
</Tab.Navigator>
</NavigationContainer>
)
}
export default Routes