Tworzenie biblioteki dla twojego modułu

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

React Native posiada bogaty ekosystem bibliotek do rozwiązywania typowych problemów. Gromadzimy biblioteki React Native na stronie reactnative.directory, co stanowi doskonałe źródło wiedzy, które każdy deweloper React Native powinien dodać do zakładek.

Czasem pracujesz nad modułem, który warto wydzielić do osobnej biblioteki w celu ponownego wykorzystania kodu. Może to być biblioteka, którą chcesz używać we wszystkich swoich aplikacjach, którą chcesz udostępnić społeczności jako komponent open source, a nawet biblioteka, którą chcesz sprzedawać.

W tym przewodniku nauczysz się:

• jak wydzielić moduł do osobnej biblioteki

• jak dystrybuować bibliotekę za pomocą NPM

Wydzielanie modułu do biblioteki

Do utworzenia nowej biblioteki możesz użyć narzędzia create-react-native-library. To narzędzie konfiguruje nową bibliotekę z całym potrzebnym kodem szablonowym: wszystkimi plikami konfiguracyjnymi i plikami wymaganymi przez różne platformy. Posiada również przyjazny interaktywny menu, które przeprowadzi cię przez proces tworzenia biblioteki.

Aby wydzielić moduł do osobnej biblioteki, wykonaj następujące kroki:

1. Utwórz nową bibliotekę

2. Przenieś kod z aplikacji do biblioteki

3. Zaktualizuj kod, aby odzwierciedlał nową strukturę

4. Opublikuj ją.

1. Tworzenie biblioteki

1. Rozpocznij proces tworzenia, uruchamiając polecenie:

sh

npx create-react-native-library@latest <Name of Your Library>

2. Podaj nazwę swojego modułu. Musi to być poprawna nazwa npm, więc powinna składać się z małych liter. Możesz użyć - do oddzielania słów.

3. Dodaj opis pakietu.

4. Kontynuuj wypełnianie formularza, aż dojdziesz do pytania "Jakiego rodzaju bibliotekę chcesz opracować?"

5. Na potrzeby tego przewodnika wybierz opcję Moduł Turbo. Zauważ, że możesz tworzyć biblioteki zarówno dla Nowej Architektury, jak i Architektury Starszej (Legacy).

6. Następnie możesz wybrać, czy chcesz bibliotekę, która ma dostęp do platformy (Kotlin & Objective-C), czy współdzieloną bibliotekę C++ (C++ dla Androida i iOS).

7. Na koniec wybierz Test App jako ostatnią opcję. Ta opcja tworzy bibliotekę z oddzielną aplikacją, która jest już skonfigurowana w folderze biblioteki.

Po zakończeniu interaktywnego procesu narzędzie tworzy folder o strukturze, która w Visual Studio Code wygląda następująco:

Zachęcamy do zapoznania się z kodem, który został dla ciebie utworzony. Najważniejsze części to:

• Folder android: tutaj znajduje się kod dla Androida

• Folder cpp: tutaj znajduje się kod w C++

• Folder ios: tutaj znajduje się kod dla iOS

• Folder src: tutaj znajduje się kod JavaScript.

Plik package.json jest już skonfigurowany z wszystkimi informacjami, które przekazaliśmy do narzędzia create-react-native-library, w tym z nazwą i opisem pakietu. Zauważ, że package.json jest również skonfigurowany do uruchamiania Codegen.

json

  "codegenConfig": {
    "name": "RN<your module name>Spec",
    "type": "all",
    "jsSrcsDir": "src",
    "outputDir": {
      "ios": "ios/generated",
      "android": "android/generated"
    },
    "android": {
      "javaPackageName": "com.<name-of-the-module>"
    }
  },

Wreszcie, biblioteka zawiera już całą infrastrukturę umożliwiającą jej połączenie z iOS i Androidem.

2. Kopiowanie kodu z twojej aplikacji

Dalsza część przewodnika zakłada, że masz w swojej aplikacji lokalny moduł Turbo Native, utworzony zgodnie z wytycznymi przedstawionymi w innych przewodnikach na tej stronie: moduły Turbo Native dla konkretnych platform lub moduły Turbo Native wieloplatformowe. Przewodnik ten działa również dla komponentów oraz modułów i komponentów starszej architektury. Będziesz musiał dostosować pliki, które musisz skopiować i zaktualizować.

1. [Nie wymagane dla modułów i komponentów starej architektury] Przenieś kod z folderu specs w twojej aplikacji do folderu src utworzonego przez create-react-native-library.

2. Zaktualizuj plik index.ts, aby poprawnie eksportował specyfikację Turbo Native Module, dzięki czemu będzie dostępna z biblioteki. Przykład:

ts

import NativeSampleModule from './NativeSampleModule';

export default NativeSampleModule;

3. Skopiuj natywny moduł:

   • Zastąp kod w android/src/main/java/com/<name-of-the-module> kodem napisanym w aplikacji dla twojego natywnego modułu (jeśli istnieje).
   • Zastąp kod w folderze ios kodem napisanym w aplikacji dla twojego natywnego modułu (jeśli istnieje).
   • Zastąp kod w folderze cpp kodem napisanym w aplikacji dla twojego natywnego modułu (jeśli istnieje).

4. [Nie wymagane dla modułów i komponentów starej architektury] Zaktualizuj wszystkie odwołania do poprzedniej nazwy specyfikacji na nową nazwę zdefiniowaną w polu codegenConfig pliku package.json biblioteki. Przykładowo, jeśli w package.json aplikacji ustawiłeś AppSpecs jako codegenConfig.name, a w bibliotece jest to RNNativeSampleModuleSpec, zamień wszystkie wystąpienia AppSpecs na RNNativeSampleModuleSpec.

To wszystko! Przeniosłeś wymagany kod z aplikacji do osobnej biblioteki.

Testowanie biblioteki

Narzędzie create-react-native-library dostarcza przykładową aplikację już skonfigurowaną do pracy z biblioteką – to doskonały sposób na przetestowanie!

W folderze example znajdziesz strukturę identyczną jak w nowej aplikacji React Native tworzonej z szablonu react-native-community/template.

Aby przetestować bibliotekę:

1. Przejdź do folderu example.

2. Uruchom yarn install, aby zainstalować zależności.

3. Tylko dla iOS: zainstaluj CocoaPods poleceniem cd ios && pod install.

4. Zbuduj i uruchom Androida poleceniem yarn android z folderu example.

5. Zbuduj i uruchom iOS poleceniem yarn ios z folderu example.

Używanie biblioteki jako modułu lokalnego

Istnieją scenariusze, w których możesz chcieć używać biblioteki jako lokalnego modułu w aplikacjach bez publikowania na NPM.

W takim przypadku biblioteka może znajdować się jako folder siostrzany względem twoich aplikacji.

shell

Development
├── App
└── Library

Bibliotekę stworzoną za pomocą create-react-native-library możesz użyć również w ten sposób.

1. Dodaj bibliotekę do aplikacji: przejdź do folderu App i wykonaj yarn add ../Library.

2. Tylko dla iOS: przejdź do folderu App/ios i uruchom bundle exec pod install, aby zainstalować zależności.

3. Zaktualizuj plik App.tsx, importując kod z biblioteki. Przykład:

tsx

import NativeSampleModule from '../Library/src/index';

Jeśli uruchomisz aplikację teraz, Metro nie znajdzie potrzebnych plików JS. Dzieje się tak, ponieważ Metro działa z folderu App i nie ma dostępu do plików JS w folderze Library. Aby to naprawić, zaktualizuj plik metro.config.js następująco:

diff

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
+ const path = require('path');

- const config = {}
+ const config = {
+  // Make Metro able to resolve required external dependencies
+  watchFolders: [
+    path.resolve(__dirname, '../Library'),
+  ],
+  resolver: {
+    extraNodeModules: {
+      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+    },
+  },
+};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Konfiguracja watchFolders nakazuje Metro obserwować pliki i zmiany w dodatkowych ścieżkach – tutaj w ../Library, gdzie znajduje się potrzebny plik src/index. Właściwość resolver jest niezbędna, aby dostarczyć bibliotece kod React Native używany przez aplikację. Bez tego dodatkowego resolvera importy z React Native w bibliotece nie powiodą się.

W tym momencie możesz budować i uruchamiać aplikację jak zwykle:

• Zbuduj i uruchom aplikację na Androida za pomocą polecenia yarn android z folderu example.

• Zbuduj i uruchom aplikację na iOS za pomocą polecenia yarn ios z folderu example.

Publikowanie biblioteki na NPM

Konfiguracja umożliwiająca publikowanie wszystkiego na NPM jest już gotowa, dzięki narzędziu create-react-native-library.

1. Zainstaluj zależności w swoim module za pomocą polecenia yarn install.

2. Zbuduj bibliotekę, uruchamiając polecenie yarn prepare.

3. Opublikuj ją za pomocą polecenia yarn release.

Po chwili twoja biblioteka pojawi się na NPM. Aby to sprawdzić, uruchom:

bash

npm view <package.name>

gdzie package.name to name, które ustawiłeś w pliku package.json podczas inicjalizacji biblioteki.

Teraz możesz zainstalować bibliotekę w swojej aplikacji, uruchamiając:

bash

yarn add <package.name>

uwaga

Tylko dla iOS: po zainstalowaniu nowego modułu zawierającego natywny kod, musisz ponownie zainstalować CocoaPods, uruchamiając bundle exec pod install (zalecane) lub pod install, jeśli nie używasz Bundlera Ruby (niezalecane).

Gratulacje! Opublikowałeś swoją pierwszą bibliotekę React Native.