标签: react-navigation-bottom-tab

我正在尝试将边框半径添加到底部栏，但是我想将容器颜色从默认更改为紫色。

我怎样才能做到这一点 ？

到目前为止我做了什么

我想要的是

代码：

tabBarOptions: {
      activeTintColor: colors.primary,
      inactiveTintColor: colors.black,
      showLabel: false,
      style: {
        borderWidth: 0.5,
        borderBottomWidth: 1,
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        borderColor: colors.lightGrayText,
      },
    },

任何人都可以帮忙吗？

谢谢

我需要使用 React 导航选项卡和 tabBarComponent 创建自定义的可滚动顶部选项卡栏，而不使用任何其他第三方库。

const TopTabBar = createMaterialTopTabNavigator({
    Home: HomePage,
    Entertainment: EntertainmentNews,
    Business: BusinessStack,
    Music: MusicStack,
    Politics: PoliticsStack,
    Sports: SportsStack,
    Technology: TechnologyStack,
    WorldNews: WorldNewsStack
}, {
    tabBarComponent: (props) => <TopTabBarComponent {...props}/>
})

在此使用选项卡栏组件时，我可以创建顶部栏，但滑动屏幕时它不会滚动？

import React , { Component } from 'react'
import { Text, View, StyleSheet, FlatList, TouchableOpacity, Animated, Dimensions} from 'react-native'

interface Props {
    navigation?: any
}

interface State {
    //
}

export class TopTabBarComponent extends Component <Props, State>{
    flatListRef
    constructor(props: Props, state: State){
        super(props, state)
    }





    onPressItem …

我想让我的选项卡导航器在视觉上保持以下顺序：“主页”选项卡、“连接”选项卡、“聊天”选项卡

但我希望“连接”选项卡（第二个选项卡）成为应用程序加载时打开的第一个选项卡。我没有找到一种方法可以将其添加到堆栈导航器而不重新排列选项卡的顺序。除了第一个具有以下结构的选项卡之外，是否还有另一种方法可以定位选项卡：

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        ProfileCardScreen,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        AllChatScreen,
        SingleChat,
      })
    },
    {
      defaultNavigationOptions: ({navigation}) => ({
        tabBarIcon: ({tintColor}) => {
          const {routeName} = navigation.state;
          if (routeName === "Home") {
            return <MaterialIcons name={"home"} size={20} color={tintColor} />;
          } else if (routeName === "Connect") {
            return <MaterialIcons name={"link"} size={20} color={tintColor} />;
          } else if (routeName === "Chat") { …

我想更改标签栏背景颜色。

我的底部导航有 5 个选项卡。首先，当我触摸主页选项卡时。当我触摸其他（四个）选项卡时，我想将选项卡栏的背景颜色更改为“透明”。我想将选项卡栏的背景颜色更改为“白色”，我也想通过其他选项卡更改 activeTintColor 。

这是我的代码和屏幕截图（我想制作这个屏幕截图）。

现在是我的主屏幕。主屏幕截图

我想要另一个屏幕。截屏

import { View } from 'react-native';

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

import MyHomeStack from './HomeStack';
import MyProfileStack from './ProfileStack';

import InformScreen from '../screens/InformScreen';
import SearchScreen from '../screens/SearchScreen';
import UploadScreen from '../screens/UploadScreen';

import CustomIcon from '../components/CustomIcon';

const Tab = createBottomTabNavigator();

function MainTabStack(){
  return (
    <Tab.Navigator
      initialRouteName="Home"
      labelStyle={{ fontSize: 12 }}
      tabBarOptions={{
        style: {
          height: '9%',
          backgroundColor: 'transparent',
          position:'absolute',
          bottom:0,
          elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
      }}>
      <Tab.Screen
        name="Home"
        component={MyHomeStack}
        options={{
          tabBarIcon: …

我想在底部选项卡的顶部添加一行，如何添加？像这个问题https://github.com/react-navigation/react-navigation/issues/8957

反应导航版本：

"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",

我正在尝试测试我的应用程序，但无法使导航正常工作。当我测试导航以转到 Bottomtabnavigator 时，出现错误：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

这只是语法错误吗？感谢您的任何帮助。

应用程序.js

import React, { useState, useEffect } from 'react';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Authentication from './Screens/Authentication';
import Login from './Screens/Login';
import Register from './Screens/Register';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/StackNavigator';

export default function App() {

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => { …

我的底部选项卡导航有问题。这是屏幕结构：

• 主选项卡：
  • 选项卡A
    • 屏幕A1
  • 标签B
    • 屏幕B1
    • 屏幕B2

我可以从屏幕 A1 导航到屏幕 B2（更改选项卡）。我可以从屏幕 B1 导航到屏幕 B2。

这是示例代码：

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const TabAScreen1 = ({ route, navigation }) => {
  return (
    <View>
      <Text>Tab A screen 1</Text>
      <Button
        title="Go to tab B screen 2"
        onPress={() => { …

尝试在 React Native 应用程序中创建一个 BottomTabNavigtor。这是我的导航器代码。

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Platform } from "react-native";

import CategoriesScreen from "../screens/CategoriesScreen";
import CategoryMealScreen from "../screens/CategoryMealScreen";
import MealDetailScreen from "../screens/MealDetailScreen";
import FavoritesScreen from "../screens/FavoritesScreen";
import Colors from "../constants/colors";

const MealsNavigator = createStackNavigator(
  {
    Categories: {
      screen: CategoriesScreen,
      navigationOptions: {
        title: "Meal Categories"
      }
    },
    CategoryMeals: {
      screen: CategoryMealScreen
    },  MealDetail: MealDetailScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: Platform.OS …

我正在将我的应用程序从 react-navigation 4 升级到 5。

在版本 4 中，我有一个选项卡可以使用以下代码打开抽屉

const MainNavigator = createBottomTabNavigator(
  {
More: {      
      screen: AdminNavigator,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          //return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
          return (
            <Icon
              name="tune"
              color={tabInfo.tintColor}
              size={tabInfo.focused ? 32 : 28}
              style={{
                paddingTop: 10,
              }}
            />
          );
        },
        tabBarColor: Colors.primary,       
        tabBarOnPress: ({ navigation }) => {
          navigation.openDrawer();
        },
      },
    },
}

在新版本 5 中，我有以下导航配置

<NavigationContainer>          
    <Drawer.Navigator>
       <Drawer.Screen name="Home" component={TabsScreen} />
       <Drawer.Screen name="Favorites" component={FavoritesStackScreen} />
       <Drawer.Screen name="Language" component={LanguageStackScreen} />
    </Drawer.Navigator>
</NavigationContainer>

其中 TabScreen …

我试图在底部选项卡导航器上方显示一个媒体播放器，就像在 Spotify 应用程序中一样。它应该在所有屏幕（底部选项卡）上保持相同的状态。

有什么建议或方法可以在 React Native 中实现这一点吗？