反应导航框阴影未移除

时间:2021-04-24 21:57:02

标签: reactjs react-native react-navigation

谁能告诉我为什么我点击导航项时 Boxshadow 不会删除?

如果我点击,它会在 1 秒内出现一个阴影。但这应该删除。我尝试了这个解决方案但没有成功:

        elevation: 0,
        shadowColor: "#000000",
        shadowOffset: { width: 0, height: 0 }, // change this for more shadow
        shadowOpacity: 0,
        shadowRadius: 6,

代码:

import React from 'react';
import { View, Text, Button,Dimensions } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { FontAwesome5, AntDesign } from '@expo/vector-icons'; 
import MyProducts from '../../../screens/profile/myProducts';
import Placeholder from '../../../screens/profile/placeholder';
import Placeholder2 from '../../../screens/profile/placeholder2';

const width = Dimensions.get('window').width;

const Tab = createMaterialTopTabNavigator();

const ProfileTabs = () => {
  return (
    <Tab.Navigator
    shifting={true}
    tabBarPosition="top"
    timingConfig={2}
    activeColor={true}
    tabBarOptions={
    {
      tabStyle: {
        backgroundColor: '#fff',
        padding: 12,
        margin: 8,
        flex: 1,
      },
      style: {
        elevation: 0,
        shadowColor: "#000000",
        shadowOffset: { width: 0, height: 0 }, // change this for more shadow
        shadowOpacity: 0,
        shadowRadius: 6,
        borderWidth: 0
      },
      pressOpacity: true,
      indicatorStyle:{backgroundColor: 'coral'},
      showLabel: true,
      activeTintColor: '#333',
      labelStyle: {
        fontSize: 16,
 
      },
      iconStyle: {
        color: '#333',
      },
      showIcon: false
    }
    }
  >
    <Tab.Screen
      name="Product"
      component={MyProducts}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarColor: 'blue',
        tabBarLabel: 'Products'
      }}
    />
    <Tab.Screen 
      name="Placeholder"
      component={Placeholder}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Suche',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
          <AntDesign name="search1" size={22} color={focused ? 'red' : 'black'} />
        )
      }}
      />
    <Tab.Screen 
      name="PlaceholderTwo"
      component={Placeholder2}
      iconStyle={true}
      activeColor={true}
      options={{
        tabBarLabel: 'Plus',
        tabBarColor: 'red',
        tabBarIcon: ({ focused, color }) => (
        <View style={{
          flex: 1,
          width: width * 5,
        }}>
          <AntDesign 
            name="pluscircle"
            size={32}
            style={{marginVertical: -6.5, marginHorizontal: -6.1}} color="red" />
        </View>
        )
      }}
      />
    </Tab.Navigator>
  )
};

export default ProfileTabs;

0 个答案:

没有答案