如何通過洗掉“tabBarOptions”部分來更改活動圖示的顏色并且一切仍然有效？
瀏覽我前段時間在教程中制作的應用程式，我在控制臺中遇到了這個警告：
底部選項卡導航器：'tabBarOptions'已棄用。將選項遷移到'screenOptions'。將以下內容放在代碼中的“screenOptions”中以保持當前行為：
閱讀React Navigation 提供的有關底部選項卡導航的資訊，我設法通過以下方式解決了錯誤。
<Tab.Screen
name="restaurants"
component={RestaurantsStack}
options={{
title: "Restaurants",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
但是，在我的應用程式中，當我們瀏覽螢屏時，我想更改按鈕的顏色，我們所在螢屏的圖示以不同的顏色顯示，當時的代碼如下所示，并且這就是為什么它向我顯示警告的原因。問題是我不知道如何糾正這個
這是我檔案的完整代碼
const Tab = createBottomTabNavigator()
export default function Navigation() {
const screenOptions = (route, color) => {
let iconName
switch (route.name) {
case "tiendas":
iconName = "compass-outline"
break;
case "favorites":
iconName = "heart-outline"
break;
case "top-tiendas":
iconName = "star-outline"
break;
case "search":
iconName = "magnify"
break;
case "account":
iconName = "home-outline"
break;
}
return (
<Icon
type="material-community"
name={iconName}
size={22}
color={color}
/>
)
}
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="tiendas"
tabBarOptions={{
inactiveTintColor: "#f48b28",
activeTintColor: "#633204"
}}
screenOptions={({ route }) => ({
tabBarIcon: ({ color }) => screenOptions(route, color)
})}
>
<Tab.Screen
name="tiendas"
component={tiendasStack}
options={{
title: "Tiendas",
headerShown: false
}}
/>
<Tab.Screen
name="favorites"
component={FavoritesStack}
options={{
title: "Favoritos",
headerShown: false
}}
/>
<Tab.Screen
name="top-tiendas"
component={ToptiendasStack}
options={{
title: "Top 10",
headerShown: false,
}}
/>
<Tab.Screen
name="search"
component={SearchStack}
options={{
title: "Buscar",
headerShown: false,
}}
/>
<Tab.Screen
name="account"
component={AccountStack}
options={{
title: "Cuenta",
headerShown: false,
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
正如我已經說過的，我可以通過以下方式解決它，但我不知道如何添加所需的顏色以及如何在圖示處于活動狀態時使其更改：
這將洗掉警告，但我無法更改顏色：如何通過洗掉'tabBarOptions'零件來更改活動圖示的顏色并且一切仍然有效？
const Tab = createBottomTabNavigator()
export default function Navigation() {
// Navigation buttons
return (
<NavigationContainer>
<Tab.Navigator >
<Tab.Screen
name="tiendas"
component={TiendasStack}
options={{
title: "Tiendas",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="favorites"
component={FavoritesStack}
options={{
title: "Favoritos",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="heart-outline"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="top-tiendas"
component={TopTiendasStack}
options={{
title: "Top 5",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="star-outline"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="search"
component={SearchStack}
options={{
title: "Buscar",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="magnify"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="account"
component={AccountStack}
options={{
title: "Cuenta",
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="home-outline"
color={color}
size={size}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
uj5u.com熱心網友回復：
像這樣將 tabBarInactiveTintColor 和 tabBarActiveTintColor 選項添加到 screenOptions ：
<Tab.Navigator
initialRouteName="tiendas"
screenOptions={({ route }) => ({
tabBarInactiveTintColor: "#f48b28",
tabBarActiveTintColor: "#633204"
})}
>...</Tab.Navigator>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/461563.html
標籤：javascript 反应 反应式 反应导航堆栈 反应导航底部选项卡
上一篇：完成進度條后使進度條消失