Úvod

Nedávno jsem začal pracovat s nativním projektem s NativeBase. Mám pocit, že průvodce vlastními písmy může být trochu těžké pochopit, proto píšu tento blog, abych vám to usnadnil!

Předběžně

Chcete-li sledovat blog, měli byste vědět pár věcí -

• Základy React
• Základy React Native
• Základy výstavy
• Základy strojopisu

Věci, které používám

• Vscode:pro psaní kódu
• Nodejs:pro různé příkazy a npm
• Balíčky
  • šablona expo ts:pro vytvoření nativní aplikace pro reakci s ts
  • expo-font:pro použití písma v expo
  • @expo-google-fonts/inter:písmo google inter

Inicializace aplikace pomocí expo a ts

Spusťte aplikaci pomocí - (nainstalujte expo, pokud není k dispozici v globálním balíčku)

expo init custom-font-with-ts

se otevře

? Choose a template: » - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>   blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

Vyberte blank (TypeScript) protože budeme pracovat se strojopisem! Chvíli to potrvá. Až to bude hotové, nainstalujme naši knihovnu komponent uživatelského rozhraní nativbase použitím

yarn add native-base
expo install react-native-svg react-native-safe-area-context

Instalace hotová. Nyní pojďme k App.tsx soubor a přidejte native-base . Soubor bude vypadat takto -

import { NativeBaseProvider, Box } from "native-base";

export default function App() {
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        Hello world
      </Box>
    </NativeBaseProvider>
  );
}

Spusťte to pomocí yarn start . Můžeme to spustit na Androidu, ios nebo na webu. Spustím to v Androidu a vypadá to jako -

Jako výchozí rodina písem je její použití

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
  Arial, sans-serif;

Přidat písmo Google

Nyní sem přidáme nějaké vlastní písmo Google! Používáme expo, takže musíme postupovat podle expo způsobu instalace vlastního písma Google -

expo install expo-font @expo-google-fonts/inter

Používám inter font, takže jsem ho nainstaloval sem. Můžete použít jiná písma, jak chcete. Zde se podívejte na písma Google dostupná na výstavě

Nyní musíme načíst písmo v našem App.tsx

import {
  useFonts,
  Inter_100Thin,
  Inter_200ExtraLight,
  Inter_300Light,
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  Inter_800ExtraBold,
  Inter_900Black,
} from "@expo-google-fonts/inter";
import { NativeBaseProvider, Box, Text } from "native-base";

export default function App() {
  let [fontsLoaded] = useFonts({
    Inter_100Thin,
    Inter_200ExtraLight,
    Inter_300Light,
    Inter_400Regular,
    Inter_500Medium,
    Inter_600SemiBold,
    Inter_700Bold,
    Inter_800ExtraBold,
    Inter_900Black,
  });

  if (!fontsLoaded) {
    return <></>;
  }

  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text fontSize="2xl" fontWeight="700" textTransform="uppercase">
          Custom Font App
        </Text>
      </Box>
    </NativeBaseProvider>
  );
}

Můžeme přidat vlastní písmo, ale momentálně se nepoužívají. Pokud se podíváme do aplikace, použijeme najít staré použité písmo. Takže to musíme zlepšit změnou motivu z nativní základny!

Pojďme to udělat společně. Přidejte theme.ts soubor v kořenovém adresáři a přidejte tam písma -

import { extendTheme } from "native-base";

export const theme = extendTheme({
  fontConfig: {
    Inter: {
      100: {
        normal: "Inter_100Thin",
      },
      200: {
        normal: "Inter_200ExtraLight",
      },
      300: {
        normal: "Inter_300Light",
      },
      400: {
        normal: "Inter_400Regular",
      },
      500: {
        normal: "Inter_500Medium",
      },
      600: {
        normal: "Inter_600SemiBold",
      },
      700: {
        normal: "Inter_700Bold",
      },
      800: {
        normal: "Inter_800ExtraBold",
      },
      900: {
        normal: "Inter_900Black",
      },
    },
  },

  // Make sure values below matches any of the keys in `fontConfig`
  fonts: {
    heading: "Inter",
    body: "Inter",
    mono: "Inter",
  },
});

Nyní stačí propojit motiv s naším aktuálním App.tsx

import { theme } from "./theme";
...
<NativeBaseProvider theme={theme}>
...
</NativeBaseProvider>

Nyní můžeme vidět nové písmo v naší aplikaci. Spusťte to znovu o yarn start a podívejte se na výsledek -

Takto můžeme snadno přidat font google pomocí expo reagovat nativní a nativebase!

Zdrojový kód

Najdete ho zde - https://github.com/nerdjfpb/custom-font-with-ts

Chcete posunout projekt na další úroveň?

Prozkoumejte, jak strukturuji kód reakce pro práci s týmem (ušetří to spoustu času) -
https://blog.nerdjfpb.com/how-to-add-eslint-prettier-and-husky-git-hook-in-react-js-2022

Máte otázky?

Pošlete dm na - twitter

Chcete být součástí úžasné programátorské komunity a účastnit se bezplatných programovacích akcí?

Připojte se k našemu Discord serveru

Chcete mě najmout pro svůj další projekt?

Spojte mě s linkedin