@expo-google-fonts/red-hat-mono (英语)

npm version license publish size

此软件包允许您使用 红帽单曲 字体家族从谷歌字体在你的博览会应用.

红帽单曲

Red Hat Mono

此字体家族包含 10个样式。。。 .

RedHatMono_300Light
RedHatMono_400Regular
RedHatMono_500Medium
RedHatMono_600SemiBold
RedHatMono_700Bold
RedHatMono_300Light_Italic
RedHatMono_400Regular_Italic
RedHatMono_500Medium_Italic
RedHatMono_600SemiBold_Italic
RedHatMono_700Bold_Italic

使用量

从您的 Expo 项目的根目录中的 shell 中运行此命令, 以便将字体家族包添加到您的工程中

npx expo install @expo-google-fonts/red-hat-mono expo-font

现在将这样的代码添加到您的工程中

import { Text, View } from "react-native";
import { useFonts } from '@expo-google-fonts/red-hat-mono/useFonts';
import { RedHatMono_300Light } from '@expo-google-fonts/red-hat-mono/300Light';
import { RedHatMono_400Regular } from '@expo-google-fonts/red-hat-mono/400Regular';
import { RedHatMono_500Medium } from '@expo-google-fonts/red-hat-mono/500Medium';
import { RedHatMono_600SemiBold } from '@expo-google-fonts/red-hat-mono/600SemiBold';
import { RedHatMono_700Bold } from '@expo-google-fonts/red-hat-mono/700Bold';
import { RedHatMono_300Light_Italic } from '@expo-google-fonts/red-hat-mono/300Light_Italic';
import { RedHatMono_400Regular_Italic } from '@expo-google-fonts/red-hat-mono/400Regular_Italic';
import { RedHatMono_500Medium_Italic } from '@expo-google-fonts/red-hat-mono/500Medium_Italic';
import { RedHatMono_600SemiBold_Italic } from '@expo-google-fonts/red-hat-mono/600SemiBold_Italic';
import { RedHatMono_700Bold_Italic } from '@expo-google-fonts/red-hat-mono/700Bold_Italic';

export default () => {

  let [fontsLoaded] = useFonts({
    RedHatMono_300Light, 
    RedHatMono_400Regular, 
    RedHatMono_500Medium, 
    RedHatMono_600SemiBold, 
    RedHatMono_700Bold, 
    RedHatMono_300Light_Italic, 
    RedHatMono_400Regular_Italic, 
    RedHatMono_500Medium_Italic, 
    RedHatMono_600SemiBold_Italic, 
    RedHatMono_700Bold_Italic
  });

  let fontSize = 24;
  let paddingVertical = 6;

  if (!fontsLoaded) {
    return null;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_300Light"
        }}>
          Red Hat Mono Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_400Regular"
        }}>
          Red Hat Mono Regular
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_500Medium"
        }}>
          Red Hat Mono Medium
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_600SemiBold"
        }}>
          Red Hat Mono Semi Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_700Bold"
        }}>
          Red Hat Mono Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_300Light_Italic"
        }}>
          Red Hat Mono Light Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_400Regular_Italic"
        }}>
          Red Hat Mono Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_500Medium_Italic"
        }}>
          Red Hat Mono Medium Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_600SemiBold_Italic"
        }}>
          Red Hat Mono Semi Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "RedHatMono_700Bold_Italic"
        }}>
          Red Hat Mono Bold Italic
        </Text>
      </View>
    );
  }
};