如何使用自定义字体设计底部导航器

Question

在设计底部选项卡导航器时，如何在 React Native 中使用自定义字体？ 我已经能够在其他表单上毫无问题地使用它，但在底部选项卡导航器上，我似乎仍然遇到一些挑战。

我的代码看起来是这样的，但它仍然是一样的，没有任何改变。

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomePage from '../src/HomePage';
import TransfersPage from '../src/TransfersPage';
import ProfilesPage from '../src/ProfilePage';
import SettingsPage from '../src/SettingsPage';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function BottomNavigation() {
  return (
    <Tab.Navigator screenOptions={({route}) => ({
        headerShown:false,
        style:{
            fontFamily:'Poppins-Medium',
            fontSize:27,
            color : '#00BB23'
        },
        tabBarIcon:({color, size, focused}) =>{
            let iconName;

            if (route.name ==='HomePage'){
                iconName = focused ? 'ios-home-sharp' : 'ios-home-outline'
            }else if(route.name ==='Transfers'){
                iconName = focused ? 'ios-send-sharp' : 'ios-send-outline'
            }else if(route.name ==='Profile'){
                iconName = focused ? 'ios-person-sharp' : 'ios-person-outline'
            }else if(route.name ==='Settings'){
                iconName = focused ? 'ios-settings-sharp' : 'ios-settings-outline'
            }

            return <Icon name={iconName} size={27} color={"#00BB23"} />
        }
    })}>
      <Tab.Screen name="HomePage" component={HomePage} />
      <Tab.Screen name="Transfers" component={TransfersPage} />
      <Tab.Screen name="Profile" component={ProfilesPage} />
      <Tab.Screen name="Settings" component={SettingsPage} />
    </Tab.Navigator>
  );
}

export default BottomNavigation;

我的 app.Js 看起来像这样：

import React from 'react';
import {Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SplashScreen from './src/SplashScreen';
import LoginPage from './src/LoginPage';
import RegisterPage from './src/RegisterPage';
import BottomNavigation from './navigation/BottomNavigation';

const Stack = createStackNavigator()

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}} />
        <Stack.Screen name="Login" component={LoginPage} options={{headerShown:false}} />
        <Stack.Screen name="Register" component={RegisterPage} />
        <Stack.Screen name="Dashboard" component={BottomNavigation} options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

我有什么做得不对的地方吗？

Answer 1

  <Tab.Screen
    options={() => ({
      tabBarIcon: ({ focused }) => (
        <View
          style={[
            styles.usContainer,
            { borderColor: focused ? colors.primary : colors.white },
          ]}>
          <Text
            style={[
              styles.usText,
              { color: focused ? colors.primary : colors.white },
            ]}>
            US
          </Text>
        </View>
      ),
    })}
    name="us-screen"
    component={Demo}
  />

您可以像这样使用自定义组件

Answer 2

您需要使用tabBarLabelStyle。

在 React Native 项目中设置自定义字体后，您可以简单地执行以下操作，

tabBarLabelStyle: { fontFamily: 'Your-Font-Name' },