我正在使用带有5个标签的@ react-navigation / bottom-tab。 中间的标签图标是徽标,顶部带有三角形的形状。
请查看下面的图片以获得实际和预期结果。
我尝试使用诸如三角形和菱形的不同形状作为基本图像,但是看起来并不优美。
我也做了snack demo,所以你们帮助我会更容易。 '
谢谢
答案 0 :(得分:0)
您可以通过将主图像相对于背景色倾斜来实现此目的 工作示例: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,
}
});