我如何在React Navigation 5.x中创建透明背景？

Question

bounty到期在6天内。该问题的答案有资格获得+ 250声望赏金。user3009752正在寻找来自信誉良好的来源的答案。

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

有什么方法可以实现这一目标？我正在使用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;

据我看，我找不到任何使它透明的方法。

Answer 1

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,
  },
});

Answer 2

默认情况下，从createBottomTabNavigator返回的导航器不与TabBar重叠屏幕。话虽这么说，即使您的TabBar是透明的，屏幕也会在TabBar的开始处结束。屏幕不在TabBar后面

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

Answer 3

很难说，因为您没有提供实际使用DashboardTabBar组件创建导航器的代码，即

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>

但是，您应该将带有样式对象的tabBarOptions属性添加到Tab.Navigator组件，如下所示：

    <Tab.Navigator
      tabBar={...}
      tabBarOptions={{
        style: {
           backgroundColor: 'transparent',
           borderTopWidth: 0,
           position: 'absolute',
           marginHorizontal: 0,
           paddingHorizontal: 0,
           left: 0,
           right: 0,
           bottom: 0,
           height: 100,
        },
      }}>
    { /* ...your screens go here */ }
</Tab.Navigator>

注意：我仍在尝试格式化，因为目前看起来还不太好。

以前是