react-navigation-tabs - 图标未对齐并覆盖文本 [英] react-navigation-tabs - icons not aligned and covering text

问题描述

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

I cant seem to get the icons to align using the new react-navigation-tabs.....some icons are sitting higher than others. Also the icons are covering the labels and Id like to have some margin between icon and label. I tried the code style={{textAlignVertical: 'center'}} for the icons (from another question on SO) but that did not work either

下面是代码

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

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

....but this is what it looks like :(

有人可以帮忙吗?

推荐答案

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

I styled the first icon and you can change it as necessary to fit your needs and then apply those to the other two icons as well. If you need to understand what is going on better go ahead and apply backgroundColor attr to different elements. Simply, I wrapped the icon component in a View and then gave that view some styling to fit the icon appropriately.

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

这篇关于react-navigation-tabs - 图标未对齐并覆盖文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！