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

npm version license publish size

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

朵朵

Doto

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

Doto_100Thin
Doto_200ExtraLight
Doto_300Light
Doto_400Regular
Doto_500Medium
Doto_600SemiBold
Doto_700Bold
Doto_800ExtraBold
Doto_900Black

使用量

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

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

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

import { Text, View } from "react-native";
import { useFonts } from '@expo-google-fonts/doto/useFonts';
import { Doto_100Thin } from '@expo-google-fonts/doto/100Thin';
import { Doto_200ExtraLight } from '@expo-google-fonts/doto/200ExtraLight';
import { Doto_300Light } from '@expo-google-fonts/doto/300Light';
import { Doto_400Regular } from '@expo-google-fonts/doto/400Regular';
import { Doto_500Medium } from '@expo-google-fonts/doto/500Medium';
import { Doto_600SemiBold } from '@expo-google-fonts/doto/600SemiBold';
import { Doto_700Bold } from '@expo-google-fonts/doto/700Bold';
import { Doto_800ExtraBold } from '@expo-google-fonts/doto/800ExtraBold';
import { Doto_900Black } from '@expo-google-fonts/doto/900Black';

export default () => {

  let [fontsLoaded] = useFonts({
    Doto_100Thin, 
    Doto_200ExtraLight, 
    Doto_300Light, 
    Doto_400Regular, 
    Doto_500Medium, 
    Doto_600SemiBold, 
    Doto_700Bold, 
    Doto_800ExtraBold, 
    Doto_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: "Doto_100Thin"
        }}>
          Doto Thin
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_200ExtraLight"
        }}>
          Doto Extra Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_300Light"
        }}>
          Doto Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_400Regular"
        }}>
          Doto Regular
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_500Medium"
        }}>
          Doto Medium
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_600SemiBold"
        }}>
          Doto Semi Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_700Bold"
        }}>
          Doto Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_800ExtraBold"
        }}>
          Doto Extra Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "Doto_900Black"
        }}>
          Doto Black
        </Text>
      </View>
    );
  }
};