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

Question

我似乎无法使用新的react-navigation-tabs来对齐图标。....有些图标的位置高于其他图标。图标也覆盖了标签，并且Id希望在图标和标签之间留出一些空白。我尝试了图标的代码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

我为第一个图标设置了样式，您可以根据需要进行更改以适合您的需求，然后将其也应用于其他两个图标。如果您需要更好地了解情况，请将backgroundColor attr应用于不同的元素。简而言之，我将图标组件包装在一个View中，然后为该视图提供了一些样式以适合该图标。

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',
  }
});