标签: react-navigation-bottom-tab

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

我正在开发 React Native 应用程序。

我能够自己解决所有问题，但这是个例外。我将使用底部选项卡导航器加载另一个屏幕。

例如，用户登录应用程序后，它应该显示主屏幕，其中有许多图片和许多样式表效果、图标。因此，在登录确认后（我的意思是在登录确认警报后），几秒钟后主屏幕出现。

所以我想在登录屏幕中显示一些微调器，同时在后台加载主主屏幕，当它准备好显示时，擦除微调器并显示主主屏幕。我怎样才能做到这一点？

我的底部选项卡导航器只是使用createBottomTabNavigator()方法创建的。

从昨天开始我就一直被这个问题困扰，找不到解决办法。

我一直在尝试调整 iPhone X 中 safeArea 的颜色，对于没有选项卡的屏幕，它在顶部和底部运行良好，但是，在带有选项卡导航器的屏幕中，底部 safeArea 始终为白色，如图所示屏幕截图。有谁知道如何解决这个问题？

另外，我想问使用普通的 SafeAreaView 组件并删除 SafeAreaProvider 并删除 react-native-safe-area-context 包是否会更好，我只是将其添加为解决此问题的试用版，但我首先使用React Native 普通 SafeAreaView 组件；

在应用程序组件中：

import { SafeAreaProvider } from "react-native-safe-area-context";
          <SafeAreaProvider>
            <NavigationContainer>
              <CatNavigator />
            </NavigationContainer>
          </SafeAreaProvider>

在 CatNavigator 组件中：

const CatNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"    >
      <Drawer.Screen
        name="Home"
        component={SettingsNavigator}
        options={{ title: "Inicio" }}
      />
    </Drawer.Navigator>

在设置选项卡导航器中：

const SettingsNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let …

在React Native 0.62是否有可能隐藏滚动与创建的TabBarcreateBottomTabNavigator从reactnavigation.org？

我很好奇是否有可能以类似于 LinkedIn 的方式，当您向下滚动页面时，标签栏会消失，而当您向上滚动时，它会重新出现。还是只能使用自定义标签栏？

我想从底部选项卡导航器中删除图标空间/视图。我尝试通过删除 tabBarIcon 来删除图标，但它不起作用。这是我尝试过的代码和我收到的结果。看起来不太好，标签不在中心。他们看起来好像已经进入了可见屏幕下方。使用的代码：

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: screen1,
        navigationOptions: {
            // tiitle: "hello"
            // tabBarIcon: () => {
            //     <View></View>
            // },
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline', }}>Screen1</Text>,
        }
    },
    People: {
        screen: screen2,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen2</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',
        }
    },
    Connects: {
        screen: screen3,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen3</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',

            // barStyle: { backgroundColor: '#2c6d6a' }, …

我有 3 个选项卡，每个选项卡都包含一组堆栈导航器。

1. 家庭堆栈

    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = ({navigation, route}) => {
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component={Home}
          />
          <HomeNavigator.Screen
            name="Profile"
            component={Profile}
          />
          <HomeNavigator.Screen
            name="Settings"
            component={Settings}
          />
        </HomeNavigator.Navigator>
      );
    };

2. 存储堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = ({navigation, route}) => {
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component={Store}
          />
        </StoreNavigator.Navigator>
      );
    };

3. 社区堆栈

    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = ({navigation, route}) => {
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component={Community}
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component={CommunityReply}
            options={communityReplyOptions}
          />
          <CommunityNavigator.Screen …

我开发了一个底部选项卡导航器并使用 Lottie 动画作为图标。我希望它们自动播放，并且仅在焦点对准时播放一次（如币安应用程序）。我已经尝试过loop={false}，但这完全阻止了它的动画。代码如下：

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LottieView from 'lottie-react-native';

import Home from './Home';
import Create from './Create';
import Messages from './Messages';
import Forum from './Forum';
import Profile from './Profile';

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let filePath;

          switch (route.name) {
            case 'Home':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Messages':
              filePath = require('../tabanimations/messagestab.json'); …

我想将自定义样式添加到我的选项卡导航器中。我尝试过使用style:{}内部screenOptions但样式不起作用。只有内置样式道具才起作用。这是我的代码：

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

import Home from './Home'
import Create from './Create'
import Messages from './Messages'
import Forum from './Forum'
import Profile from './Profile'
import LottieView from "lottie-react-native";
import Icon from 'react-native-vector-icons/Feather';

const Tabs = createBottomTabNavigator();

export default function App() {
    return (

        <Tabs.Navigator

            screenOptions={({ route }) => ({
                tabBarShowLabel: false,
                tabBarHideOnKeyboard: true,
                style: {
                    borderRadius: 15,
                    height: 90,
                },
                tabBarIcon: ({ focused, color, size }) => {
                    let …

我正在尝试在选项卡导航器之间传递一些参数。下面是我的程序的结构。粗体字为路线

应用程序（选项卡导航器）：{主（堆栈）和过滤器（屏幕）}

主要（堆栈导航器）：{ Home（屏幕）和MediaDetails（屏幕）}

我在屏幕上有一个与Filter关联的按钮，它具有onPress()函数。我传递了一些参数（但为了解决这个问题，我们只考虑参数） 。

this.props.navigation.navigate('Home', {
    to: this.state.to,
}

state = {
    to: this.props.route.params.to
}

<Stack.Screen 
    name="Home" 
    component={HomeScreen}                 
    initialParams={{
       to: '2020'
    }}
/>