使自定义按钮出现在 React Native 导航栏的顶部 [英] Make custom button appear on top of React Native Navigation Bar

问题描述

我想创建一个导航栏，中间有一个大的自定义按钮.路由和一切正常，但按钮在导航栏组件的边框处被切断.我该如何制作，以便按钮显示在顶部?我试过 zIndex，但这对我不起作用.谢谢.

I want to create a navigation bar with a large custom button in the middle. The routing and everything works, but the button gets cut off at the border of the navigation bar component. How can I make it, so that the button displays on top? I tried zIndex, but that did not work for me. Thank you.

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]:https://i.stack.imgur.com/OB2C1.png

推荐答案

使用此代码可防止 ScanIcon 从顶部被截断.

Use this code to prevent the ScanIcon from being cut off from the top.

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

简单明了.干杯！

这篇关于使自定义按钮出现在 React Native 导航栏的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！