标签: react-navigation-bottom-tab

我对 React 非常陌生，我正在尝试为底部栏上的非活动选项卡设置文本和其他样式的颜色，但已经使用了几个小时并且无法使其工作，因为文本不会出现，除非这是选定的选项卡。我正在使用createMaterialBottomTab。

如果我能得到任何帮助，这是我的整个屏幕：

import React from 'react'
import { Platform, Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'

import HeadlinesScreen from '../screens/HeadlinesScreen'
import IrelandScreen from '../screens/IrelandScreen'
import TechnologyScreen from '../screens/TechnologyScreen'

const defaultStackNavOptions = {
    headerStyle: {
        backgroundColor: '#4a148c'
    },
    headerTintColor: 'white',
}

const NewsNavigator = createStackNavigator(
    {
        Headlines: HeadlinesScreen,
        Ireland: IrelandScreen,
        Technology: TechnologyScreen
    })

const HeadLinesNavigator …

我正在使用 TypeScript 创建一个由 Expo 管理的 React Native 应用程序，并且在 React Navigation 和 TypeScript 方面遇到了一些问题。

我想为 Tab.Screen 组件上的底部选项卡导航器指定图标。

这段代码可以工作，但会抱怨，因为 route.params 可能是未定义的（第 10 行）。

类型“对象”上不存在属性“图标”

我可以在 initialParams 上制作所需的图标道具吗？

我在没有任何运气的情况下查看了文档。

const App: React.FC<{}> = () => {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ size, color }) => (
              <MaterialIcons
                size={size}
/* ===> */      name={route.params.icon}
                color={color}
              />
            ),
          })}
        >
          <Tab.Screen
            name="EventListView"
            initialParams={{ icon: 'view-agenda' }}
            component={EventListScreen}
          />
          <Tab.Screen
            name="CreateEvent"
            initialParams={{ icon: 'public' }}
            component={SettingsScreen}
          />
        </Tab.Navigator>
      </NavigationContainer> …

我正在尝试更改 React Native 中底部选项卡导航栏的高度。我已经尝试了这个Stack Overflow 问题的一些答案，但似乎没有任何效果。请帮忙。

我的代码：

export default function AppTabs({ logged }) {
  const Tabs = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tabs.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              const current_color = focused ? COLORS.white : COLORS.lightGrey;

              if (route.name === "Home") {
                return <Foundation name="home" size={28} color={current_color}/>
              } else if (route.name === "Search") {
                return <Ionicons name="search" size={28} color={current_color} />
              } else if (route.name === "Library") { …

我正在用来react-navigation createBottomTabNavigator创建底部选项卡导航。标签栏在 iOS 上显示正常，但在 Android 上显示如下：

我不确定是什么导致了这种奇怪的造型。下面是我创建底部标签栏的代码：

    <Provider store={store}>
      <NavigationContainer theme={GlobalConfig.theme}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconSrc

              if (route.name === 'Alarms') {
                iconSrc = require('../img/ic_alarm.png')
              } else if (route.name === 'Settings') {
                iconSrc = require('../img/ic_settings.png')
              }

              return (
                <Image
                  source={iconSrc}
                  style={{
                    tintColor: focused
                      ? GlobalConfig.theme.colors.primary
                      : GlobalConfig.theme.colors.tabBarIconUnselected
                  }}
                />
              )
            }
          })}
          tabBarOptions={{
            activeTintColor: GlobalConfig.theme.colors.primary,
            inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected
          }}>
          <Tab.Screen name={I18n.t('alarms')} component={AlarmsTab} />
          <Tab.Screen name={I18n.t('settings')} component={SettingsTab} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>

每个选项卡都是一个堆栈导航器。警报堆栈导航配置如下：

    <Stack.Navigator
      initialRouteName="AlarmListScreen" …

我正在使用 React Navigation5。我有一个选项卡导航器，想清除单击选项卡上的选项卡历史记录。例如，我在选项卡 1 上，然后转到选项卡 2。从选项卡 2，我导航

屏幕1->屏幕2->屏幕3

现在如果我点击选项卡，它应该进入初始屏幕（screen1）。但它不起作用，它以错误的方式工作。这是我的代码。

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CommonActions, StackActions } from '@react-navigation/native';


// Custom imports:
import StartScreen from '../screens/start/StartScreen';
import ProductsScreen from '../screens/products/ProductsScreen';
import AddCustomerScreen from '../screens/customers/AddCustomerScreen';
import CustomersScreen from '../screens/customers/CustomersScreen';
import WebviewScreen from '../screens/webview/WebviewScreen';

// Menu Screen
import MenuScreen from '../screens/menu/MenuScreen';
import CurrentAccountScreen from '../screens/menu/CurrentAccountScreen';
import AccountDetailScreen from '../screens/menu/AccountDetailScreen';
import AppInfoScreen from '../screens/menu/AppInfoScreen';
import MessagesScreen from '../screens/menu/MessagesScreen';

import { …

我试图将用户 ID 从登录屏幕传递到作为嵌套选项卡导航器一部分的主屏幕。这是我的应用程序的结构：

 const mainStack = () =>(

             <Tab.Navigator


             tabBarOptions={{
              activeTintColor: 'tomato',
              inactiveTintColor: 'gray',
            }}
             >
                <Tab.Screen name="Home" component={Homescreen} 
                 options = {{headerStyle: {backgroundColor: 'yellow'}}}
                />
                <Tab.Screen name="Profile" component={otherStack} />
             </Tab.Navigator>

    )




export default () => (

        <NavigationContainer >
              <Stack.Navigator screenOptions={{
                  headerShown: false
                  }}>
                <Stack.Screen name='Welcome' component={WelcomeScreen} />
                <Stack.Screen name = 'Register' component = {RegisterScreen} />
                <Stack.Screen name= 'Login' component={LoginScreen} />
                <Stack.Screen name = 'mainStack' component={mainStack} />
              </Stack.Navigator>



        </NavigationContainer>

)

每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时，我都会收到一条错误消息，指出它不是一个函数。仔细检查后，我发现 this.props.navigation.state 是未定义的。可能意味着我的参数不会传递到主屏幕，即使我导航到它没有任何问题。

我尝试使用 NavigationActions 但我收到一个错误，我在其他任何地方都没有提到。

我像这样导航到主页：

this.props.navigation.navigate('Home' { …

为了显示通知徽章，我发现可以使用反应导航中的 tabBarBadge。tabBarBadge 仅接受数字或字符串，而不接受函数，因此当用户专注于通知屏幕时，我无法找到禁用它的方法。我怎样才能禁用它？

在 tabBarIcon 中有 tabInfo.focused 让我们知道用户何时在此屏幕上。tabBarBadge 有类似的方法吗？

该图标显示在屏幕/页面中，但不会显示在底部导航中。我尝试过的解决方案：

• 按照github的安装指南进行操作，我尝试了GRADLE和MANUAL选项，但结果相同
• ./gradlew clean然后尝试过npx react-native run-android，但结果相同
• npx react-native link react-native-vector-icons 然后尝试过npx react-native run-android，但结果相同

屏幕截图底部导航栏

屏幕截图设置屏幕

它确实出现在屏幕/页面中，如上面的屏幕截图所示，但不会显示在底部导航中。

注意：我已经在模拟器和真实的 Android 设备中进行了测试，但仍然得到相同的结果！

底部选项卡的代码

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



const BottomTab = createBottomTabNavigator();

const BottomTabNav = () => {
return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home", …