使自定义按钮出现在 React Native 导航栏顶部

Question

我想创建一个导航栏，中间有一个大的自定义按钮。路由和一切正常，但按钮在导航栏组件的边框处被切断。我怎样才能使按钮显示在顶部？我尝试了 zIndex，但这对我不起作用。谢谢你。

const HomeIcon = <Icon name="time-outline" size={40} color="#829a9a" />;
const ScanIcon = <Icon name="qr-code-outline" size={60} color="#829a9a" />;
const GiftsIcon = <Icon name="gift-outline" size={40} color="#829a9a" />;

const App: () => Node = () => {
    const customTabBarStyle = {
        activeTintColor: '#3ED77C',
        inactiveTintColor: '#829a9a',
        allowFontScaling: true,
        labelStyle: { fontSize: 14, paddingTop: 5 },
        tabStyle: { paddingTop: 5 },
        style: { height: 70},
      }
  return (
      <NavigationContainer>
        <Tab.Navigator tabBarOptions={customTabBarStyle}>
            <Tab.Screen name="Home" component={HomeScreen}
                 options={{
                   tabBarLabel: 'Aktuell',
                   tabBarIcon: () => (HomeIcon),
                 }} />
            <Tab.Screen name="Scan" component={ScanScreen}
                options= {({navigation}) => ({
                   tabBarLabel: 'Scanner',
                   tabBarButton: (props) => (
                    <Button onPress={() => navigation.navigate('Scan')}
                        buttonStyle={styles.buttonStyle}
                        icon={ScanIcon}
                      />)
                 })} />
            <Tab.Screen name="Gifts" component={GiftsScreen}
                options={{
                   tabBarLabel: 'Prämien',
                   tabBarIcon: () => (GiftsIcon),
                 }} />
        </Tab.Navigator>
      </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  buttonStyle: {
      bottom: 30,
      justifyContent: 'center',
      alignItems: 'center',
      height: 120,
      width: 120,
      backgroundColor: 'lightgrey',
      borderRadius: 100,
  },
});

export default App;

见图片： [1]：

Answer 1

我已经做了类似的按钮检查这个例子->

youtube 链接- https://youtu.be/vIWi7eLZomk

你可以查看这个例子 https://github.com/vishalpwr/bottom-tab-navigation

const BottomTab = ({ type, color, size = 24, isFocused, index }) => {
  const icon = index == 0 ? 'home' : 'heart';
  const gradient = index == 1;
  return (
    <View>
      {gradient ? (
        <LinearGradient
          colors={[Colors.light, Colors.dark]}
          start={{ x: isFocused ? 0 : 1, y: 0 }} end={{ x: isFocused ? 1 : 0, y: 0 }}
          style={styles.middleIcon}>
          <AppIcon name={'shopping-basket'} type={type} size={size} color={'white'} />
        </LinearGradient>
      ) : (
        <View style={styles.icon}>
          <AppIcon name={icon} type={type} size={size} color={color} />
        </View>
      )}
    </View>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  )
};

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator
      tabBar={(props) => <MyTabBar {...props} />}>
      <Tab.Screen name="home" component={HomeScreen} />
      <Tab.Screen name="Shop" component={ShopScreen} />
      <Tab.Screen name="Favorite" component={FavoriteScreen} />
    </Tab.Navigator>
  )
}

const MyTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View
      style={styles.bottomBar}>
      {state.routes.map((route, index) => {
        const isFocused = state.index === index;
        const { options } = descriptors[route.key];

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          })
          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        }

        const color = isFocused ? Colors.dark : Colors.gray;

        return (
          <TouchableOpacity
            key={index}
            onPress={onPress}
            testID={options.tabBarTestID}
            accessibilityRole="button"
          >
            <BottomTab
              type={index !== 1 ? Icons.MaterialCommunityIcons : Icons.FontAwesome5}
              index={index}
              isFocused={isFocused}
              size={24}
              color={color}
            />
          </TouchableOpacity>
        )
      })}
    </View>
  )
}

const styles = StyleSheet.create({
  bottomBar: {
    height: 60,
    backgroundColor: 'white',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  middleIcon: {
    bottom: 18,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: 'black',
    shadowOffset: { width: 2, height: 2 },
    shadowOpacity: 0.6,
    elevation: 8,
  }
});

Answer 2

使用此代码可以防止 ScanIcon 从顶部被切断。

navigationOptions: {
    tabBarIcon: ({focused}) => {
        let iconName = require('./{{PATH}}/abc.png');
        return (
            <View
              style={{
                flex: 1,
                width: '102%',
                height: '100%',
                alignItems: 'center',
                backgroundColor: COLOR.AppTheme,
              }}>
              <Image
                style={{
                  position: 'absolute',
                  bottom: 5,
                }}
                source={iconName}
                resizeMode="contain"
              />
            </View>
        );
    },
 },

清晰简单。干杯！

Answer 3

我认为有点晚了，但以防万一有人仍然需要它，您可以添加自定义组件。当您定义“Tab.Screen”时，只需添加“headerRight”或“headerLeft”（如果需要）。 您的代码示例：

      <Tab.Screen name="Home" component={HomeScreen}
             options={{
               tabBarLabel: 'Aktuell',
               tabBarIcon: () => (HomeIcon),
               // HERE <---
               headerRight: () => (    
                    <Button title="Log In" />
                   ) 
             }} 
             />