如何在反应导航 5.x 中创建透明背景？答案

【问题标题】：How can i create a transparent background in react navigation 5.x?如何在反应导航 5.x 中创建透明背景？
【发布时间】：2023-04-01 01:13:01
【问题描述】：

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

有什么方法可以实现吗？我正在使用 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 = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

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

          return (
            <TabBarItem
              icon={homeIcon}
              isFocused={isFocused}
              onPress={onPress}
              onLongPress={onLongPress}
              options={options}
              key={route.key}
            />
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 18,
    backgroundColor: 'red', // I tried with 'transparent' here, but i see a white background instead of transparent
  },
  innerContainer: {
    height: 60,
    backgroundColor: colors.GREY_L_10,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: colors.GREY,
  },
});

export default DashboardTabBar;

就我查看代码而言，我找不到任何使其透明的方法。

【问题讨论】：

你能分享生成底部标签的代码吗？你在哪里设置红色？
@user3009752 您希望在后台看到什么？图像、某种颜色或者根视图背景闪屏？
在后台我有一个垂直滚动视图，这是一个很长的列表。如果我在 react native 底部导航器后面有一个项目，我希望在它后面可见

标签： react-native react-navigation react-navigation-v5 react-navigation-bottom-tab

【解决方案1】：

在您的代码中的其他地方，您有一个使用 DashboardTabBar 组件的组件。您应该将带有 style 对象的 tabBarOptions 属性添加到 Tab.Navigator 组件，如下所示：

    <Tab.Navigator
      tabBar={...}
      tabBarOptions={{
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          elevation: 0, <----to get rid of a shadow problem on Android
        },
      }}>
    { /* ...your screens go here */ }
</Tab.Navigator>

我在 iOS 和 Android 上都成功地做到了这一点。 就我个人而言，它对我的应用看起来并不好。

【讨论】：

【解决方案2】：

默认情况下，从createBottomTabNavigator 返回的 Navigator 不会与 TabBar 重叠屏幕。话虽如此，即使您的 TabBar 是透明的，您的 Screen 也会在 TabBar 开始的地方结束。屏幕不在 TabBar 后面

幸运的是，您只需将 position: 'absolute', bottom: 0, left: 0, right: 0 添加到您的 TabBar container 样式（您应用 backgroundColor: 'transparent' 的样式）

【讨论】：

【解决方案3】：

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 18,
    backgroundColor: 'transparent',
  },
  innerContainer: {
    height: 60,
    backgroundColor: colors.GREY_L_10,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: colors.GREY,
  },
});

【讨论】：

感谢您的回复。我添加了红色以使其更清晰。我已经尝试过透明，但没有任何运气。我看到的是白色背景而不是透明的
白色必须是您的主屏幕背景颜色。尝试将其设置为其他颜色并查看。

【解决方案4】：

对于 React Navigation v6，您需要在 TabNavigator 上设置 screenOptions。 （我将它与自定义/透明底部标签栏结合使用）。

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

const Tab = createBottomTabNavigator();

<Tab.Navigator
      screenOptions={{
        tabBarStyle: {backgroundColor: 'blue'},
      }}
      tabBar={props => {
        return (
          <View>
            <BottomTabBar {...props} />
          </View>
        );
      }}
      initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
      ...
  </Tab.Navigator>

【讨论】：