因此,我试图在我的ReactNative项目中添加一个底部导航栏。但是每次我试图运行这个项目时,我都会出错。
这是我得到的信息:

我还收到一条警告:底部Tab导航器:'tabBarOptions‘是不推荐的。将选项迁移到“screenOptions”。
通过这样做,我试图编辑Ionicons代码:
return <IonIcon icon={iconName.props}></IonIcon>;以下是代码:
import React, { Component } from "react";
import { Text, View, StyleSheet, Image, TextInput, ScrollView, SafeAreaView, TouchableOpacity } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// Screens
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
import SettingsScreen from './screens/SettingsScreen.js';
//Screen names
const homeName = "Home";
const detailsName = "Details";
const settingsName = "Settings";
const Tab = createBottomTabNavigator();
function MainContainer() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={homeName}
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === homeName) {
iconName = focused ? 'home' : 'home-outline';
} else if (rn === detailsName) {
iconName = focused ? 'list' : 'list-outline';
} else if (rn === settingsName) {
iconName = focused ? 'settings' : 'settings-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
"tabBarActiveTintColor": "tomato",
"tabBarInactiveTintColor": "grey",
"tabBarLabelStyle": {
"paddingBottom": 10,
"fontSize": 10
},
"tabBarStyle": [
{
"display": "flex"
},
null
]
}}>
<Tab.Screen name={homeName} component={HomeScreen} />
<Tab.Screen name={detailsName} component={DetailsScreen} />
<Tab.Screen name={settingsName} component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default MainContainer;
发布于 2022-12-04 17:30:34
你在用世博会吗?如果是这样的话,您需要导入。
import Ionicons from '@expo/vector-icons/Ionicons';https://stackoverflow.com/questions/74675950
复制相似问题