@ expo- google- fonts/ onest (英语)

npm version license publish size

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

顶上

Onest

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

Onest_100Thin
Onest_200ExtraLight
Onest_300Light
Onest_400Regular
Onest_500Medium
Onest_600SemiBold
Onest_700Bold
Onest_800ExtraBold
Onest_900Black

使用量

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

npx expo install @expo-google-fonts/onest expo-font

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

import { Text, View } from "react-native";
import { useFonts } from '@expo-google-fonts/onest/useFonts';
import { Onest_100Thin } from '@expo-google-fonts/onest/100Thin';
import { Onest_200ExtraLight } from '@expo-google-fonts/onest/200ExtraLight';
import { Onest_300Light } from '@expo-google-fonts/onest/300Light';
import { Onest_400Regular } from '@expo-google-fonts/onest/400Regular';
import { Onest_500Medium } from '@expo-google-fonts/onest/500Medium';
import { Onest_600SemiBold } from '@expo-google-fonts/onest/600SemiBold';
import { Onest_700Bold } from '@expo-google-fonts/onest/700Bold';
import { Onest_800ExtraBold } from '@expo-google-fonts/onest/800ExtraBold';
import { Onest_900Black } from '@expo-google-fonts/onest/900Black';

export default () => {

  let [fontsLoaded] = useFonts({
    Onest_100Thin, 
    Onest_200ExtraLight, 
    Onest_300Light, 
    Onest_400Regular, 
    Onest_500Medium, 
    Onest_600SemiBold, 
    Onest_700Bold, 
    Onest_800ExtraBold, 
    Onest_900Black
  });

  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: "Onest_100Thin"
        }}>
          Onest Thin
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_200ExtraLight"
        }}>
          Onest Extra Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_300Light"
        }}>
          Onest Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_400Regular"
        }}>
          Onest Regular
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_500Medium"
        }}>
          Onest Medium
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_600SemiBold"
        }}>
          Onest Semi Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_700Bold"
        }}>
          Onest Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_800ExtraBold"
        }}>
          Onest Extra Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Onest_900Black"
        }}>
          Onest Black
        </Text>
      </View>
    );
  }
};