未显示React-native底部选项卡导航图标

ohfgkhjo  于 2022-11-17  发布在  React
关注(0)|答案(2)|浏览(209)

这是我的App.js。我正在尝试为我的应用程序添加底部选项卡。
`

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Home from './components/Home';
import Details from './components/Details';
import Liked from './components/Liked';
import Profile from './components/Profile';
import colors from './assets/colors/colors';
import Entypo from 'react-native-vector-icons/Entypo';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

Entypo.loadFont();


const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarStyle: styles.tabBar,
        tabBarActiveTintColor: colors.orange,
        tabBarInactiveTintColor: colors.gray,
      }}>

      <Tab.Screen name="Home" component={Home}
        options={{
          tabBarIcon: ({ size, color }) =>
            <Entypo name="home" size={size} color={color} />,
        }} />

      <Tab.Screen name="Liked" component={Liked} options={{
        tabBarIcon: ({ size, color }) =>
          <Entypo name="home" size={size} color={color} />,
      }} />

      <Tab.Screen name="Profile" component={Profile} options={{
        tabBarIcon: ({ size, color }) =>
          <Entypo name="home" size={size} color={color} />,
      }} />

    </Tab.Navigator>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="TabNavigator" component={TabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    position: 'absolute',
    backgroundColor: colors.white,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
})

export default App;

`
这是我的依赖

"dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.8",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.4",
    "react": "18.1.0",
    "react-native": "0.70.4",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-ionicons": "^4.6.5",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-vector-icons": "^9.2.0"
  },

`
这是安卓版本

我能怎么办?
我想得到显示底部标签图标。我尝试了其他图标包以及。(例如:羽毛,材料社区图标和图标)。我认为图标包工作正常。我能做些什么呢?

z31licg0

z31licg01#

tabBarIcon: ({ focused, color, size }) => {
        let iconName;
        iconName = focused ? 'calendar-alt' : 'calendar-alt';

        return <Icon name={iconName} size={size} color={color} />;
      },

可能focused Arg采用不同的值,react-vector-icons中的一些包不工作,尝试使用另一个图标包,或使用测试名称更改名称,如name=“menu”

k5ifujac

k5ifujac2#

我认为要么你错过了矢量图标的安装步骤,要么你没有提到android/app/build.gradle文件中的Entypo

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

您需要在此处提及Entypo.ttf

相关问题