我如何设计我的本机顶部选项卡导航以具有背景颜色和图标

Question

我对原生反应有点陌生，我在设计顶部标签导航时遇到了一些困难

我如何设计我的本机顶部选项卡导航以具有背景颜色和图标

在 React Native 中查看我的顶部选项卡导航的代码

我已经尝试了所有我知道的，似乎没有任何效果

看看我想要的样子

看看它的样子

看我下面的代码

import "react-native-gesture-handler"
import React from "react"
import { DefaultTheme } from "@react-navigation/native"
import { AppearanceProvider, useColorScheme } from "react-native-appearance"
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"

import { PersonalSetupScreen } from "./tabs/personal-setup"
import { CompanySetupScreen } from "./tabs/company-setup"
import { Images } from "../../config"

const Tab = createMaterialTopTabNavigator()
const MyDarkTheme = {
  // Ovverride dark theme with your theme
  dark: true,
  colors: {
    primary: "rgb(255, 255, 255)",
    background: "rgb(33, 20, 122)",
    card: "rgb(255, 255, 255)",
    text: "rgb(255, 255, 255)",
    border: "rgb(199, 199, 204)",
    notification: "rgb(255, 69, 58)",
  },
}

export default function HomeTabs() {
  const scheme = useColorScheme()

  return (
      <Tab.Navigator >
        <Tab.Screen
          name="PersonalSetup"
          component={PersonalSetupScreen}
          options={({ navigation }) => ({
            tabBarLabel: "Personal Details",
            activeTintColor: "#21147a",
            inactiveTintColor: "21147a",
            activeBackgroundColor: "#21147a",
            inactiveBackgroundColor: "#21147a",
            style: {
              backgroundColor: "#21147a",
            },
          })}
        />
        <Tab.Screen
          name="CompanySetup"
          component={CompanySetupScreen}
          options={({ navigation }) => ({
            tabBarLabel: "Company Details",
            activeTintColor: "#21147a",
            inactiveTintColor: "21147a",
            activeBackgroundColor: "#21147a",
            inactiveBackgroundColor: "#21147a",
            style: {
              backgroundColor: "#21147a",
            },
          })}
        />
      </Tab.Navigator>
  )
}

Answer 1

根据此处的文档： Material Top Tab Navigator

您可以传入一个tabBarIcon 。

您还可以将您自己的自定义组件作为 TabBar 按钮传递，您可以根据需要设置样式（文本 + 图标 + 背景颜色 ...）

Answer 2

您可能已经找到了解决方案。

这是来自reactnavigation.org的完整示例。

import { Animated, View, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation, position }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            // The `merge: true` option makes sure that the params inside the tab screen are preserved
            navigation.navigate({ name: route.name, merge: true });
          }
        };    

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const inputRange = state.routes.map((_, i) => i);
        const opacity = position.interpolate({
          inputRange,
          outputRange: inputRange.map(i => (i === index ? 1 : 0)),
        });

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Animated.Text style={{ opacity }}>
              {label}
            </Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ...

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>

参考： https : //reactnavigation.org/docs/material-top-tab-navigator/#tabbar

如需更多信息，请访问此链接。

Answer 3

从'@react-navigation/material-top-tabs'导入{createMaterialTopTabNavigator}；

const TopTab = createMaterialTopTabNavigator();

const Tab = () => {
return (
   <TopTab.Navigator 
    screenOptions={{
      tabBarActiveTintColor:'white',
      tabBarIndicatorStyle: {
        backgroundColor: 'white',
        height: 2
      },
      tabBarScrollEnabled: true,
      tabBarLabelStyle: {fontSize: 20},
      tabBarItemStyle: { width: 150, },
      tabBarStyle: {
        height: 40,
        backgroundColor: '#c21a0c',
      },
    }}
    >
     <TopTab.Screen name ='PERSONAL DETAILS' component={Personal} Options={{
         tabBarIcon: () => (
        <MaterialCommunityIcons name="search-web" size={24} />
      )}} />
      <TopTab.Screen name ='COMPANY DETAILS' component = {Company} />
      <TopTab.Screen name ='CONTACT DETAILS' component = {FOX} />
      <TopTab.Screen name ='PROFILE' component = {Google} />
    </TopTab.Navigator>
)
}