时间戳

首页 > 解决方案 > 反应本机 MaterialCommunityIcons 在 Top Tab Navigator 版本 5 中不起作用

javascript - 反应本机 MaterialCommunityIcons 在 Top Tab Navigator 版本 5 中不起作用

问题描述

顶部选项卡导航工作，但图标不只显示屏幕名称，我正在使用 react-navigation 版本 5，如果不是 materialcommunityicons 其他可用于顶部栏导航的替代方案以及如何使用它。

import React from 'react';
import {Text, View} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {MaterialCommunityIcons} from 'react-native-vector-icons/MaterialCommunityIcons'

const tab = createMaterialTopTabNavigator();

function DetailsScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Details</Text>
  </View>
);
}

function SettingScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Syllabus!</Text>
  </View>
);
}

 function ProfileScreen() {
  return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Awards!</Text>
  </View>
);
}
const Mytabs = () =>{
 return(
 <tab.Navigator initialRouteName="home">
    <tab.Screen options={{
      tabBarLabel: 'Home',
      tabBarIcon: () => (
        <MaterialCommunityIcons name="home" />
      ),
    }}name="Home" component={DetailsScreen}  />
    <tab.Screen name="Settings" component={SettingScreen} />
    <tab.Screen name="Profile" component={ProfileScreen} />
    
    
  </tab.Navigator>
  
   );
   }
export default Mytabs;

标签： javascriptreactjsreact-nativereact-navigationreact-native-vector-icons

解决方案

首先安装，然后请运行以下命令：

react-native link react-native-vector-icons

推荐阅读