react-native：带有三角形顶部形状的底部标签图像

Question

我正在使用带有 5 个标签的 @react-navigation/bottom-tabs。 中间的标签图标是一个顶部有三角形形状的标志。

请查看下图了解实际和预期结果。

我尝试过使用三角形和菱形等不同形状作为基础图像，但它看起来并不优雅。

我还发了一个snack demo，这样你们就更容易帮助我了。 '

谢谢

Answer 1

您可以通过将主图像相对于背景颜色倾斜来实现这一点 工作示例：https://snack.expo.io/@msbot01/tenacious-toffee

import * as React from 'react';

import { Text, Image, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { NavigationContainer } from '@react-navigation/native';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Tab.Navigator
          style={{ backgroundColor: '#fff' }}
          initialRouteName="Home"
          barStyle={{
            backgroundColor: '#fff',
            //     height: 70,
            elevation: 0,
            borderTopWidth: 0.2,
            borderColor: '#aaa',
          }}
          lazy={false}
          tabBarOptions={{
            activeTintColor: '#000000',
            showLabel: false,
          }}
          sceneAnimationEnabled={false}>
          <Tab.Screen
            name="Home"
            component={AssetExample}
            options={{
              title: 'Home',
              tabBarIcon: ({ color }) => (
                <Icon name="home" color="red" size={25} />
              ),
              tabBarLabel: 'Home',
            }}
          />
          <Tab.Screen
            name="BuildingStack"
            component={AssetExample}
            options={{
              tabBarIcon: ({ color }) => (
                <Icon name="account" color="red" size={25} />
              ),
            }}
          />
          <Tab.Screen
            name="QuadStack"
            component={AssetExample}
            options={{
              tabBarIcon: ({ color }) => (
                <View
                  style={{
                    position: 'absolute',
                    bottom: -5, // space from bottombar
                    height: 70,
                    width: 70,
                    //borderRadius: 70,
                    backgroundColor: 'transparent',
                    justifyContent: 'center',
                    alignItems: 'center',
                    shadowColor: '#ffffff',
                    shadowOffset: {
                      width: 0,
                      height: 1,
                    },
                    shadowOpacity: 0.1,
                    shadowRadius: 1.65,
                    elevation: 0,
                  }}>
                  <Image
                    source={require('./assets/5.png')}
                    style={{
                      width: 65,
                      height: 65,
                      borderColor: 'red',
                      //tintColor: '#f1f6f9',
                      alignContent: 'center',
                    }}
                  />
                </View> 
              ),
            }}
          />
          <Tab.Screen
            name="COVIDStack"
            component={AssetExample}
            options={{
              tabBarIcon: ({ color }) => (
                <Icon name="alert" color="red" size={25} />
              ),
            }}
          />
          <Tab.Screen
            name="NotificationsStack"
            component={AssetExample}
            options={{
              tabBarIcon: ({ color }) => (
                <Icon name="bell" color="red" size={25} />
              ),
            }} 
          />
        </Tab.Navigator>
      </View>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});