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

问题描述

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

请查看下面的图片以获得实际和预期结果。

我尝试使用诸如三角形和菱形的不同形状作为基本图像，但是看起来并不优美。

我也做了snack demo，所以你们帮助我会更容易。 '

谢谢

解决方法

您可以通过将主图像相对于背景色倾斜来实现此目的 工作示例：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,}}>
                  <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,paddingTop: Constants.statusBarHeight,backgroundColor: '#ecf0f1',padding: 8,}
});