标签: react-navigation-bottom-tab

在我的本机应用程序中，我有一个使用 react-navigation-material-bottom-tabs 的路由器组件。

在那个组件中，我像这样创建了它。

const tabNavigator = createMaterialBottomTabNavigator({
  home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
        title: ''
    })
  },
  createCampaign: {
    screen: CreateCampaign,
    navigationOptions: ({ navigation }) => ({
        title: '',
        tabBarVisible: false
    })
  },
  settings: {
    screen: AllSettings,
    navigationOptions: ({ navigation }) => ({
        title: ''
    })
  }
});

这工作正常。但我想在某些情况下禁用此栏的某些选项卡。例如，如果配置文件尚未获得批准，请禁用设置选项卡。有什么办法可以在我的屏幕上执行此操作吗？（最好不在路由器中，因为我无法在路由器中发送 API 请求）。如何访问屏幕中的 tabBar 选项？如何禁用选项卡？请帮忙。

我在 Expo 中进行了一个最小的 ReactNative 测试。2 个屏幕，都在视图中只有文本。

它在 MBP 上运行，并通过二维码在我的 Android 设备 (Note10+) 上进行测试。

它不仅慢，而且大多数时候没有响应，当它确实通过单击导航到选项卡时，它要么是即时的（很少），要么需要 5-10 秒。但通常什么也不会发生。

没有显示任何错误，用 Stack 或 Drawer 替换相同的代码效果很好。

2 个基本屏幕：

function StackScreenA0({navigation}) {
  return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Test stack 0</Text>
        <Button title="goto 1" onPress={() => navigation.navigate('Screen A1')} />
     </View>
  );
}

function StackScreenA1({navigation}) {
  return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Test stack 0</Text>
        <Button title="goto 0" onPress={() => navigation.navigate('Screen A0')} />
     </View>
  );
}

应用程序代码（减去导入）： …

我试图隐藏标签。并且showLabel: false不工作。

import React, {useLayoutEffect} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';

import HomeTopTabNavigator from '../routes/home.top.tab';
import {NAVIGATOR} from '../constants/screen.constants';
import THEME from '../constants/theme.constants';
import Icon from '../components/atoms/Icon';

const HomeStack = createStackNavigator();

function HomeStackNavigator() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      showLabel: false,
      tabBarIcon: () => (
        <Icon
          type="MaterialCommunityIcons"
          name="home"
          size={24}
          color={THEME.PRIMARY}
        />
      ),
    });
  }, [navigation]);

  return (
    <HomeStack.Navigator
      screenOptions={{headerStyle: {elevation: 0, shadowOpacity: 0}}}>
      <HomeStack.Screen
        name={NAVIGATOR.HomeTopTab}
        component={HomeTopTabNavigator}
      />
    </HomeStack.Navigator>
  );
}

export …

嘿，我正在使用 React Navigation 中的 createBottomTabNavigator()，并且我有一个自定义顶栏，我用自己的状态更新它。问题是，当我单击选项卡时，每次导航都会调用侦听器，因此如果您转到屏幕 2，则顶部栏会进入错误的状态，顶部栏会更改为屏幕 2。当我按下顶部栏后退按钮时，它会返回到屏幕 1 并将顶部栏更改为屏幕 1 顶部栏。现在，如果我使用底部栏选项卡而不是使用顶部栏选项卡向后导航，它会使顶部栏远离屏幕 2。所以我的问题是，如果我按底部栏，它会导航回初始屏幕，我是否可以以某种方式禁用它1.

 <Tab.Screen
      listeners={() => {
              switchTab(0);
            }}
            name="Input"
            children={() => (
              <SuchStackContainer
                ref={suchStackRef}
                switchStack={switchStack}
                listings={listings}
                setListings={setListings}
              />
            )}
            options={{
              tabBarLabel: 'Suche',
              tabBarIcon: ({color, size}) => (
                <Ionicons name="car" color={color} size={size} />
              ),
            }}
          />

我正在使用 React-Navigation V4，问题是，是否有任何方法可以仅延迟加载特定选项卡，例如我有四个选项卡并且我想在选项卡组件初始化后加载两个选项卡并且不想加载其他两个这些选项卡两个只会在用户激活它们时加载。如果我lazy: true在 React 中使用它，它会在所有选项卡上工作，或者延迟加载将被全部禁用或全部启用。

我正在使用 React Navigation v5，@react-navigation/bottom-tabs我的标签看起来像这样。

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Modal" component={ModalScreen} />
    <Tab.Screen name="Settings" component{SettingsScreen} />
  </Tab.Navigator>

我想在“主页和设置”选项卡上打开屏幕，但在“模式”选项卡上，我想打开一个模式，为此，使用 React Navigation v4，可以使用tabBarOnPress它来运行回调，但在 React Navigation v5 中不可用，tabBarOnPressReact Navigation v5有什么替代方案吗？

任何帮助，将不胜感激！

当前行为

嗨，大家好，

我想为底部选项卡设置背景颜色。所以我做了如下。

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

问题是 SafeArea 有白色背景

预期行为

我期望的是

那么你能告诉我如何在 React Navigation 版本 5 中解决这个问题吗？谢谢！

您的环境

iOS 反应原生：0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/bottom-tabs: ^5.0.5

我更改了背景颜色以使其更明显。我希望红色容器变得透明。

有没有办法实现这一目标？我正在使用 react-navigation 5 并根据Bottom-tab-navigator创建了一个自定义底部标签栏

我用于底部栏的代码如下

import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');

export enum Item {
  Home,
  ProfileView,
}

const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];

          const isFocused = state.index === index;

          const onPress = () => {
            const event = …

当用户按下中间按钮时，我需要渲染一个模式。我正在使用react-native-raw-bottom-sheet库为我的应用程序提供模态。\n我尝试isFocused={props.navigation.isFocused} 在 <Tab.Screen> 内传递一个道具，但问题是当我将道具传递给基于是否集中于呈现的两个时次而不是一次。

我也尝试直接通过 触发模式但没有成功。

我的问题是，当用户按下时，我需要渲染新的，它将包含模态中内容的空洞逻辑，并且还将渲染模态。

我的 tab.routes.js

import React from \'react\';\nimport {createBottomTabNavigator} from \'@react-navigation/bottom-tabs\';\nimport TabButton from \'../components/Tab/Button\';\nimport Icon from \'react-native-vector-icons/MaterialIcons\';\n\nimport Home from \'../containers/Home\';\nimport Adjustment from \'../containers/Adjustment\';\nimport Graphic from \'../containers/Graphic\';\nimport Help from \'../containers/Help\';\nimport NewTransaction from \'../containers/NewTransaction\';\n\nconst icons = {\n  Home: {\n    name: \'home\',\n  },\n  Graphic: {\n    name: \'pie-chart\',\n  },\n  NewTransaction: {\n    name: \'notifications-none\',\n  },\n  Help: {\n    name: \'help-outline\',\n  },\n  Adjustment: {\n    name: \'settings\',\n  },\n};\n\nconst Tab = createBottomTabNavigator();\n\nconst TabRoutes = () => …

堆：

• 反应本机
• 反应导航器
• 仅核心组件

我在 TabNavigator.tsx 上有这种风格：

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
    height: 80,
    overflow: 'hidden',
    // position: 'absolute', // needed to ensure the bar has a transparent background in the corners
  },
})

我一直评论绝对位置，角落后面总是有背景，当另一种颜色的组件滚动时，它看起来很奇怪。

在这里，为了能见度，它以黄色着色：

如果我取消对绝对位置的注释，内容会在标签栏后面流动，使其感觉更自然。

但...

我需要在每个屏幕上添加一个底部边距来补偿选项卡占用的空间，或者底部的内容被隐藏。

我觉得应该有一个好的实践或已知的模式，也许是一个经过测试的解决方法，这会让我的生活更轻松。你有想法吗？

谢谢