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": {
      "modules": {
        "TestModule": {
          "className": "<iOS-class-implementing-the-RCTModuleProvider-protocol>",
          "unstableRequiresMainQueueSetup": false
          "conformsToProtocols": ["RCTImageURLLoader", "RCTURLRequestHandler", "RCTImageDataDecoder"],
        }
      },
      "components": {
        "TestComponent": {
          "className": "<iOS-class-implementing-the-component>"
        }
      }
    }
  },

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

• name: Nazwa konfiguracji Codegen. Określa ona wygląd wyjścia Codegen: nazwy plików oraz kod.

• type:

  • modules: Generuj kod tylko dla modułów.
  • components: Generuj kod tylko dla komponentów.
  • all: Generuj kod dla wszystkiego.

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

• android: Konfiguracja dla Androida (wszystkie pola opcjonalne):

  • .javaPackageName: Określa pakiet dla wygenerowanego kodu Java na Androida.

• ios: Konfiguracja dla iOS (wszystkie pola opcjonalne):

  • .modules[moduleName]:
    • .className: Klasa ObjC tego modułu. Dla modułów C++ - klasa RCTModuleProvider.
    • .unstableRequiresMainQueueSetup: Inicjalizuj moduł na wątku UI przed uruchomieniem JavaScript.
    • .conformsToProtocols: Wskaż, do których protokołów należy moduł: RCTImageURLLoader, RCTURLRequestHandler, RCTImageDataDecoder.
  • .components[componentName]:
    • .className: Klasa ObjC komponentu (np. TextInput -> 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.