Korzystanie z Codegen

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 →

Ten przewodnik pokazuje, jak:

• Konfigurować Codegen.

• Ręcznie uruchamiać go dla każdej platformy.

Opisuje również wygenerowany kod.

Wymagania wstępne

Do poprawnego wygenerowania kodu zawsze potrzebujesz aplikacji React Native, nawet przy ręcznym uruchamianiu Codegen.

Proces Codegen jest ściśle powiązany z budowaniem aplikacji, a jego skrypty znajdują się w pakiecie NPM react-native.

Na potrzeby tego przewodnika utwórz projekt za pomocą React Native CLI w następujący sposób:

bash

npx @react-native-community/cli@latest init SampleApp --version 0.76.0

Codegen służy do generowania kodu pośredniczącego (glue-code) dla twoich własnych modułów lub komponentów. Więcej szczegółów na temat ich tworzenia znajdziesz w przewodnikach o Turbo Native Modules i Fabric Native Components.

Konfigurowanie Codegen

Codegen możesz skonfigurować w swojej aplikacji, modyfikując plik package.json. Procesem tym steruje niestandardowe pole codegenConfig.

package.json

  "codegenConfig": {
    "name": "<SpecName>",
    "type": "<types>",
    "jsSrcsDir": "<source_dir>",
    "android": {
      "javaPackageName": "<java.package.name>"
    },
    "ios": {
      "modulesConformingToProtocol": {
        "RCTImageURLLoader": [
          "<iOS-class-conforming-to-RCTImageURLLoader>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetLoader",
        ],
        "RCTURLRequestHandler": [
          "<iOS-class-conforming-to-RCTURLRequestHandler>",
          // example from react-native-camera-roll: https://github.com/react-native-cameraroll/react-native-cameraroll/blob/8a6d1b4279c76e5682a4b443e7a4e111e774ec0a/package.json#L118-L127
          // "RNCPHAssetUploader",
        ],
        "RCTImageDataDecoder": [
          "<iOS-class-conforming-to-RCTImageDataDecoder>",
          // we don't have a good example for this, but it works in the same way. Pass the name of the class that implements the RCTImageDataDecoder. It must be a Native Module.
        ]
      },
      "componentProvider": {
        "<componentName>": "<iOS-class-implementing-the-component>"
      },
    }
  },

Możesz dodać poniższy fragment do swojej aplikacji i dostosować poszczególne pola:

• name: Nazwa używana do tworzenia plików zawierających specyfikacje. Konwencjonalnie powinna zawierać sufiks Spec, ale nie jest to obowiązkowe.

• type: Rodzaj generowanego kodu. Dozwolone wartości: modules, components, all.

  • modules: Używaj tej wartości, jeśli potrzebujesz kodu tylko dla Turbo Native Modules.
  • components: Używaj tej wartości, jeśli potrzebujesz kodu tylko dla Native Fabric Components.
  • all: Używaj tej wartości, jeśli masz mieszankę komponentów i modułów.

• jsSrcsDir: Główny folder zawierający wszystkie specyfikacje.

• android.javaPackageName: Specyficzne ustawienie dla Androida pozwalające Codegen generować pliki w niestandardowym pakiecie.

• ios: Pole ios to obiekt umożliwiający zaawansowane funkcje dla deweloperów aplikacji i bibliotek. Wszystkie poniższe pola są opcjonalne.

  • ios.modulesConformingToProtocol: React Native oferuje protokoły, które moduły mogą implementować. Te pola pozwalają zdefiniować listę modułów zgodnych z protokołami. Moduły te zostaną wstrzyknięte do środowiska React Native podczas uruchamiania aplikacji.
    • ios.modulesConformingToProtocol.RCTImageURLLoader: Lista natywnych modułów iOS implementujących protokół RCTImageURLLoader. Podaj nazwy klas iOS implementujących RCTImageURLLoader. Muszą to być Native Modules.
    • ios.modulesConformingToProtocol.RCTURLRequestHandler: Lista natywnych modułów iOS implementujących protokół RCTURLRequestHandler. Podaj nazwy klas iOS implementujących RCTURLRequestHandler. Muszą to być Native Modules.
    • ios.modulesConformingToProtocol.RCTImageDataDecoder: Lista natywnych modułów iOS implementujących protokół RCTImageDataDecoder. Podaj nazwy klas iOS implementujących RCTImageDataDecoder. Muszą to być Native Modules.
  • ios.componentProvider: To pole jest mapą generującą powiązanie między niestandardowym komponentem JS React a natywną klasą go implementującą. Klucz mapy to nazwa komponentu w JS (np. TextInput), a wartość to klasa iOS implementująca komponent (np. RCTTextInput).

Gdy Codegen jest uruchamiany, przeszukuje zależności aplikacji w poszukiwaniu plików JS spełniających określone konwencje i generuje wymagany kod:

• Turbo Native Modules wymagają prefiksu Native w nazwach plików specyfikacji (np. NativeLocalStorage.ts).

• Native Fabric Components wymagają sufiksu NativeComponent w nazwach plików (np. WebViewNativeComponent.ts).

Uruchamianie Codegen

Dalsza część przewodnika zakłada, że masz już skonfigurowany moduł Turbo Native Module, komponent Fabric Native Component lub oba w projekcie. Zakładamy również, że w folderze jsSrcsDir z package.json znajdują się poprawne pliki specyfikacji.

Android

Codegen dla Androida jest zintegrowany z wtyczką Gradle React Native (RNGP). RNGP zawiera zadanie, które można wywołać, aby odczytać konfiguracje zdefiniowane w pliku package.json i uruchomić Codegen. Aby wykonać zadanie Gradle, najpierw przejdź do folderu android w swoim projekcie, a następnie uruchom:

bash

./gradlew generateCodegenArtifactsFromSchema

To zadanie wywołuje polecenie generateCodegenArtifactsFromSchema dla wszystkich zaimportowanych projektów aplikacji (samej aplikacji oraz wszystkich dołączonych modułów node_modules). Generuje kod w odpowiednim folderze node_modules/<dependency>. Na przykład, jeśli masz komponent Fabric Native Components, którego moduł Node nazywa się my-fabric-component, wygenerowany kod znajdziesz w ścieżce SampleApp/node_modules/my-fabric-component/android/build/generated/source/codegen. Dla samej aplikacji kod jest generowany w folderze android/app/build/generated/source/codegen.

Wygenerowany kod

Po uruchomieniu powyższego polecenia Gradle, kod generowany przez Codegen znajdziesz w folderze SampleApp/android/app/build. Struktura będzie wyglądać następująco:

build
└── generated
    └── source
        └── codegen
            ├── java
            │   └── com
            │       ├── facebook
            │       │   └── react
            │       │       └── viewmanagers
            │       │           ├── <nativeComponent>ManagerDelegate.java
            │       │           └── <nativeComponent>ManagerInterface.java
            │       └── sampleapp
            │           └── NativeLocalStorageSpec.java
            ├── jni
            │   ├── <codegenConfig.name>-generated.cpp
            │   ├── <codegenConfig.name>.h
            │   ├── CMakeLists.txt
            │   └── react
            │       └── renderer
            │           └── components
            │               └── <codegenConfig.name>
            │                   ├── <codegenConfig.name>JSI-generated.cpp
            │                   ├── <codegenConfig.name>.h
            │                   ├── ComponentDescriptors.cpp
            │                   ├── ComponentDescriptors.h
            │                   ├── EventEmitters.cpp
            │                   ├── EventEmitters.h
            │                   ├── Props.cpp
            │                   ├── Props.h
            │                   ├── ShadowNodes.cpp
            │                   ├── ShadowNodes.h
            │                   ├── States.cpp
            │                   └── States.h
            └── schema.json

Wygenerowany kod jest podzielony na dwa foldery:

• java zawierający kod specyficzny dla platformy

• jni zawierający kod C++ wymagany do poprawnej interakcji JS z Javą.

W folderze java możesz znaleźć kod generowany dla komponentu Fabric Native w podfolderze com/facebook/viewmanagers.

• plik <nativeComponent>ManagerDelegate.java zawiera metody, które ViewManager może wywoływać na niestandardowym komponencie natywnym

• plik <nativeComponent>ManagerInterface.java zawiera interfejs ViewManager.

W folderze o nazwie zdefiniowanej w codegenConfig.android.javaPackageName znajdziesz klasę abstrakcyjną, którą musi implementować moduł Turbo Native Modules, aby wykonywać swoje zadania.

W folderze jni znajduje się cały kod pośredniczący łączący JS z Androidem.

• <codegenConfig.name>.h zawiera interfejs twoich niestandardowych modułów Turbo Native w C++.

• <codegenConfig.name>-generated.cpp zawiera kod pośredniczący dla twoich niestandardowych modułów Turbo Native w C++.

• react/renderer/components/<codegenConfig.name>: ten folder zawiera cały kod pośredniczący wymagany przez Twój własny komponent.

Ta struktura została wygenerowana dzięki użyciu wartości all dla pola codegenConfig.type. Jeśli użyjesz wartości modules, nie spodziewaj się folderu react/renderer/components/. Jeśli użyjesz wartości components, nie spodziewaj się pozostałych plików.

iOS

Codegen dla iOS opiera się na skryptach Node uruchamianych podczas procesu budowania. Skrypty znajdują się w folderze SampleApp/node_modules/react-native/scripts/.

Głównym skryptem jest generate-codegen-artifacts.js. Aby go wywołać, uruchom to polecenie z folderu głównego aplikacji:

bash

node node_modules/react-native/scripts/generate-codegen-artifacts.js

Usage: generate-codegen-artifacts.js -p [path to app] -t [target platform] -o [output path]

Options:
      --help            Show help                                      [boolean]
      --version         Show version number                            [boolean]
  -p, --path            Path to the React Native project root.        [required]
  -t, --targetPlatform  Target platform. Supported values: "android", "ios",
                        "all".                                        [required]
  -o, --outputPath      Path where generated artifacts will be output to.

gdzie:

• --path to ścieżka do folderu głównego twojej aplikacji.

• --outputPath to miejsce, w którym Codegen zapisze wygenerowane pliki.

• --targetPlatform to platforma, dla której chcesz wygenerować kod.

Wygenerowany kod

Uruchomienie skryptu z tymi argumentami:

shell

node node_modules/react-native/scripts/generate-codegen-artifacts.js \
    --path . \
    --outputPath ios/ \
    --targetPlatform ios

Wygeneruje następujące pliki w folderze ios/build:

build
└── generated
    └── ios
        ├── <codegenConfig.name>
        │   ├── <codegenConfig.name>-generated.mm
        │   └── <codegenConfig.name>.h
        ├── <codegenConfig.name>JSI-generated.cpp
        ├── <codegenConfig.name>JSI.h
        ├── FBReactNativeSpec
        │   ├── FBReactNativeSpec-generated.mm
        │   └── FBReactNativeSpec.h
        ├── FBReactNativeSpecJSI-generated.cpp
        ├── FBReactNativeSpecJSI.h
        ├── RCTModulesConformingToProtocolsProvider.h
        ├── RCTModulesConformingToProtocolsProvider.mm
        └── react
            └── renderer
                └── components
                    └── <codegenConfig.name>
                        ├── ComponentDescriptors.cpp
                        ├── ComponentDescriptors.h
                        ├── EventEmitters.cpp
                        ├── EventEmitters.h
                        ├── Props.cpp
                        ├── Props.h
                        ├── RCTComponentViewHelpers.h
                        ├── ShadowNodes.cpp
                        ├── ShadowNodes.h
                        ├── States.cpp
                        └── States.h

Część tych plików jest używana przez React Native w rdzeniu. Następnie występuje zestaw plików zawierających nazwę określoną w polu codegenConfig.name pliku package.json.

• <codegenConfig.name>/<codegenConfig.name>.h: zawiera interfejs twoich niestandardowych modułów Turbo Native dla iOS.

• <codegenConfig.name>/<codegenConfig.name>-generated.mm: zawiera kod pośredniczący twoich niestandardowych modułów Turbo Native dla iOS.

• <codegenConfig.name>JSI.h: ten plik zawiera interfejs Twoich własnych modułów Turbo Native Modules w C++.

• <codegenConfig.name>JSI-generated.h: ten plik zawiera kod pośredniczący (glue code) Twoich własnych modułów Turbo Native Modules w C++.

• react/renderer/components/<codegenConfig.name>: ten folder zawiera cały kod pośredniczący wymagany przez Twój własny komponent.

Ta struktura została wygenerowana dzięki użyciu wartości all dla pola codegenConfig.type. Jeśli użyjesz wartości modules, nie spodziewaj się folderu react/renderer/components/. Jeśli użyjesz wartości components, nie spodziewaj się pozostałych plików.