反应导航底部选项卡中的垂直居中图标答案

【问题标题】：Vertical centering icons in react-navigation bottom-tabs反应导航底部选项卡中的垂直居中图标
【发布时间】：2021-07-29 21:45:16
【问题描述】：

所以我一直在使用react navigation bottom tabs，似乎他们会自动将图标略微向上移动，因为他们认为文本将在其下方。我在下面有一张图片，您可以在其中看到图标下方的边距大于上方。我尝试使用'align-center'进行造型，但这并没有解决它。我该如何调整？

import React, {useState} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';
import Loader from '../components/Loader';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import PostsScreen from './PostsScreen';
import ProfileScreen from './ProfileScreen';
import PostSelectScreen from './PostSelectScreen';
import SearchScreen from './SearchScreen';

const Tab = createBottomTabNavigator();

const NavigatorTab = ({navigation}) => {
  const [loading, setLoading] = useState(false);

  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={PostsScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({color, size}) => (
            <Image source={require('../assets/Home.png')} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({color, size}) => (
            <Image source={require('../assets/Search.png')} />
          ),
        }}
      />
      <Tab.Screen
        name="Make Post"
        component={PostSelectScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({color, size}) => (
            <Image source={require('../assets/post.png')} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarLabel: '',
          tabBarIcon: ({color, size}) => (
            <Image source={require('../assets/Main_Nav.png')} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default NavigatorTab;

const styles = StyleSheet.create({});

【问题讨论】：

标签： javascript html css react-native

【解决方案1】：

使用 paddingTop：

....
tabBarOptions={{
    style: {
        height: ??, //optional
        paddingTop:??
    },
}}

【讨论】：