React Native：从 createBottomTabNavigator 切换到 createMaterialBottomNavigator

Question

我完全知道使用createBottomTabNavigator 会给你一个漂亮的iOS 底部标签，没有背景颜色，而createMaterialBottomNavigator 会给你一个背景颜色和Android 设备上的不同设置。

我的目标是在 iOs 设备上使用 createBottomTabNavigator，然后在 android 设备上切换到 createMaterialBottomNavigator，所有设置都像设置 activeTintColor 颜色，每当你在 android 上切换屏幕时使用 shifting: true 模式。

所以我所做的就是使用平台 API：

const MealsFavTabNavigator =
    Platform.OS === 'android'
        ? createMaterialBottomNavigator(navTabConfig)
        : createBottomTabNavigator();

然后，创建一个可能的配置：

const navTabConfig = {
    options={{
        tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
        )
    }}
};

然后尝试在我的导航器上切换：

 <MealsFavTabNavigator.Screen
                name="Meals"
                component={MealsNavigator}
                navTabConfig
            />

Which did not work. Here's the full code:

    import React from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    
    import { Ionicons } from '@expo/vector-icons';
    
    import { Platform } from 'react-native';
    import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
    
    import CategoriesScreen from '../screens/CategoriesScreen';
    import CategoryMealsScreen from '../screens/CategoryMealsScreen';
    import MealDetailScreen from '../screens/MealDetailScreen';
    
    import FavoritesScreen from '../screens/FavoritesScreen';
    
    import HeaderButton from '../components/HeaderButton';
    import { HeaderButtons, Item } from 'react-navigation-header-buttons';
    
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    
    import { CATEGORIES } from '../data/dummy-data';
    
    import Colors from '../constants/colors';
    
    const MealsNav = createStackNavigator();
    
    const MealsNavigator = () => {
        return (
            <MealsNav.Navigator
                mode="modal"
                screenOptions={{
                    headerStyle: {
                        backgroundColor: Colors.primaryColor,
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontSize: 17
                    }
                }}
            >
                <MealsNav.Screen
                    name="Categories"
                    component={CategoriesScreen}
                    options={{
                        title: 'Meals Categories'
                    }}
    
                />
                <MealsNav.Screen
                    name="CategoryMeals"
                    component={CategoryMealsScreen}
                    options={({ route }) => {
                        const catId = route.params.categoryId;
                        const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);
    
                        return {
                            title: selectedCategory.title,
                        };
    
                    }}
                />
                <MealsNav.Screen
                    name="MealDetail"
                    component={MealDetailScreen}
                    options={{
                        title: 'Meal Detail',
                        headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Favorite'
                                    iconName='ios-star'
                                    onPress={() => console.log('Mark as the favorite')}
                                />
                            </HeaderButtons>
                        ),
                    }}
                />
            </MealsNav.Navigator>
        );
    };
    
    const MealsFavTabNavigator =
        Platform.OS === 'android'
            ? createMaterialBottomNavigator(navTabConfig)
            : createBottomTabNavigator();
    
    
    const navTabConfig = {
        options={{
            tabBarIcon: ({ focused, color, size }) => (
                <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
            )
        }}
    };
    
    
    const MealsTabNav = () => {
        return (
            <NavigationContainer>
                <MealsFavTabNavigator.Navigator
                    tabBarOptions={{
                        activeTintColor: 'tomato',
                        inactiveTintColor: 'black',
                    }}>
                    <MealsFavTabNavigator.Screen
                        name="Meals"
                        component={MealsNavigator}
                        navTabConfig
                    />
                    <MealsFavTabNavigator.Screen
                        name="Favorites"
                        component={FavoritesScreen}
                        options={{
                            tabBarIcon: ({ focused, color, size }) => (
                                <Ionicons name="ios-star" size={25} color={focused ? "tomato" : "black"} />
                            )
                        }}
                    />
                </MealsFavTabNavigator.Navigator>
            </NavigationContainer>
        );
    };
    
    
    export default MealsTabNav;

如何实现从createBottomTabNavigator 切换到createMaterialBottomNavigator 的目标，然后在createMaterialBottomNavigator 上应用基本样式，例如activeTintcolor 和shifting 模式。

请帮忙！我超级卡住了！

Answer 1

你的方法是正确的，你需要做的就是你使用道具的方式。

以下代码是一个通用示例，我没有使用您的组件

标签的创建是相同的，但是如果您可以使用如下功能，则获得道具时会更好。 在这里，该函数将返回适当导航器的道具，我们使用扩展运算符来传递道具。 您可以只选择 tabBarOptions 来执行此操作，但此示例显示了所有更灵活的道具。

const Tab = Platform.OS === 'ios' ? createMaterialBottomTabNavigator() : createBottomTabNavigator();

const getNavigationOptions = () => {
  if (Platform.OS === 'ios') {
    //Props for the ios navigator
    return {
      labeled: false,
      initialRouteName: 'Settings',
      activeColor: 'red',
      inactiveColor: 'white'
    };
  }
  //Props for any other OS navigator
  return {
    initialRouteName: 'Home',
    tabBarOptions: { activeTintColor: 'red' },
  };
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator {...getNavigationOptions()}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

将此应用到您的项目中 //保持这一行不变

const MealsFavTabNavigator =
        Platform.OS === 'android'
            ? createMaterialBottomNavigator()
            : createBottomTabNavigator();

<MealsFavTabNavigator.Navigator {...getNavigationOptions()}>

并根据平台使用您自己的概率更新 getNavigationOptions

Answer 2

您是否尝试过以下操作？

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}