react-navigation-tabs - 图标未对齐并覆盖文本

Question

我似乎无法使用新的 react-navigation-tabs 使图标对齐.....有些图标比其他图标高。 图标也覆盖了标签，我希望在图标和标签之间留出一些边距。 我为图标尝试了代码style={{textAlignVertical: 'center'}}（来自另一个关于SO的问题），但这也不起作用

下面是代码

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';


const ProfileTabBarIcon = ({tintColor}) => (
  <IconFA
    name="user-circle"
    size={35}
    color={tintColor}
  />
);
const SearchTabBarIcon = ({tintColor}) => (
  <IconMCI
    name="account-search"
    size={45}
    color={tintColor}
    /*onPress={() => {
      console.log('HELP!!');
      this.props.navigation.navigate('Search');
    }}*/
  />
);
const MessageTabBarIcon = ({tintColor}) => (
  <IconFA
    name="envelope"
    size={35}
    color={tintColor}
  />
);



const SignedInTabNav = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Me',
        tabBarIcon: ProfileTabBarIcon,
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: SearchTabBarIcon,
      },
    },
    Message: {
      screen: Message,
      navigationOptions: {
        tabBarLabel: 'Message',
        tabBarIcon: MessageTabBarIcon,
      },
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
      upperCaseLabel: false,
      activeTintColor: '#42CBC8',
      inactiveTintColor: '#9A9F99',
      iconStyle: {
        width: 'auto',
        height: 20,
      },
      labelStyle: {
        fontSize: 12,
      },

      style: {
        backgroundColor: '#F8F8FF',
        //borderBottomWidth: 2,
        borderBottomColor: '#D3D3D3',
        paddingVertical: 2,
        height: 60,
      },
    },
    animationEnabled: false,
  }, 
); 

....但这就是它的样子:(

谁能帮忙？

Answer 1

我在选项卡屏幕中添加了一个空的 tabBarLabel，并将文本包含在 tabBarIcon 中。

 <Tab.Screen
    name="Home"
    component={MainStackNavigator}
    options=
    {{
       tabBarLabel:"",
       tabBarIcon:() =>
       {
         return(
            <View>
              <Text>Home</Text>
            <Image 
            style={{ width:20,height:20 }}
source{require('./assets/home_white.png')}>
             </Image>
              </View>
               )
        }
    }} 
 />

Answer 2

我为第一个图标设置了样式，您可以根据需要对其进行更改以满足您的需要，然后也将其应用于其他两个图标。如果您需要更好地了解正在发生的事情，请继续将backgroundColor attr 应用于不同的元素。简单地说，我将图标组件包装在一个视图中，然后给该视图一些样式以适当地适应图标。

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import IconFA from 'react-native-vector-icons/FontAwesome';
import IconMCI from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';

import React from 'react';
import { StyleSheet, View } from 'react-native';

const ProfileTabBarIcon = ({tintColor}) => (

  <View style={styles.container}>
    <IconFA
      style={styles.iconStyle}
      name="user-circle"
      size={35}
      color={tintColor}
    />
  </View>

);

const SearchTabBarIcon = ({tintColor}) => (
  <IconMCI
    name="account-search"
    size={45}
    color={tintColor}
    /*onPress={() => {
      console.log('HELP!!');
      this.props.navigation.navigate('Search');
    }}*/
  />
);

const MessageTabBarIcon = ({tintColor}) => (
  <IconFA
    name="envelope"
    size={35}
    color={tintColor}
  />
);



export default SignedInTabNav = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Me',
        tabBarIcon: ProfileTabBarIcon,
      },
    },
    Search: {
      screen: LinksScreen,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: SearchTabBarIcon,
      },
    },
    Message: {
      screen: SettingsScreen,
      navigationOptions: {
        tabBarLabel: 'Message',
        tabBarIcon: MessageTabBarIcon,
      },
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
      upperCaseLabel: false,
      activeTintColor: '#42CBC8',
      inactiveTintColor: '#9A9F99',
      labelStyle: {
        fontSize: 12,
        margin: 0
      },
      iconStyle: {
        flex: 1
      },
      style: {
        backgroundColor: '#F8F8FF',
        height: 65,
        borderBottomColor: '#D3D3D3',
      },
    },
    animationEnabled: false,
  }, 
); 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  }
});

Answer 3

在你的风格部分设置resizeMode 如：

<Image
    source={iconName}
    style={{ width: 25, height: 25, tintColor }}
    resizeMode={"contain"}
/>