Bearbeiten

Native UI-Komponenten

Nur alte Architektur: Diese Dokumentation beschreibt eine Funktion, die nur von der "alten" oder "Legacy"-Architektur von React Native unterstützt wird. Wir sind noch dabei, die gesamte Dokumentation zu aktualisieren, aber in der Zwischenzeit finden Sie Informationen zu React Native-Architekturen in React Native Windows unter Neue vs. alte Architektur.

Diese Dokumentation und der zugrunde liegende Plattformcode sind in Arbeit. Beispiele (C# und C++/WinRT):

• Native Modul-Beispiel in microsoft/react-native-windows-samples
• Beispiel-App in microsoft/react-native-windows/packages/microsoft-reactnative-sampleapps

Es gibt unzählige native UI-Widgets, die für die neuesten Apps bereitstehen – einige davon sind Teil der Plattform, andere sind als Drittanbieter-Bibliotheken verfügbar, und noch mehr könnten in Ihrem eigenen Portfolio im Einsatz sein. React Native hat bereits einige der wichtigsten Plattformkomponenten wie ScrollView und TextInput gekapselt, aber nicht alle und sicherlich nicht solche, die Sie selbst für eine frühere App geschrieben haben. Glücklicherweise können wir diese bestehenden Komponenten für eine nahtlose Integration in Ihre React Native-Anwendung einkapseln.

Ähnlich wie im Leitfaden für native Module handelt es sich auch hier um einen fortgeschrittenen Leitfaden, der voraussetzt, dass Sie mit der UWP-Programmierung einigermaßen vertraut sind. Dieser Leitfaden zeigt Ihnen, wie Sie eine native UI-Komponente erstellen, und führt Sie durch die Implementierung eines Teils der vorhandenen ImageView-Komponente, die in der Kernbibliothek von React Native verfügbar ist.

Übersicht

Ähnlich wie beim Erstellen nativer Module müssen Sie auf hoher Ebene Folgendes tun:

1. Erstellen Sie einen View-Manager, der einen neuen Komponententyp definiert und versteht, wie das native UI-Widget erstellt und mit ihm interagiert wird.
2. Registrieren Sie Ihren neuen View-Manager im nativen Code Ihrer React Native-Hostanwendung.
3. Referenzieren Sie die neue Komponente in Ihrem React Native JSX-Code.

Hinweis zu UWP XAML-Steuerelementen

Einige UWP XAML-Steuerelemente unterstützen nicht das Hosting in Umgebungen, in denen 3D-Transformationen involviert sind (d. h. die Eigenschaft Transform3D ist auf dem Steuerelement oder auf einem der Vorfahren des Steuerelements im XAML-Baum gesetzt).

Derzeit verwendet React Native für Windows eine globale PerspectiveTransform, um Objekten, die entlang der x- oder y-Achsen rotiert werden, ein 3D-Aussehen zu verleihen. Das bedeutet, dass Steuerelemente, die in 3D-Umgebungen nicht funktionieren, nicht sofort funktionieren (z. B. InkCanvas). Eine React Native für Windows-App kann jedoch die 3D-Perspektive deaktivieren (und dadurch die Verwendung dieser Steuerelemente ermöglichen), indem sie die Eigenschaft IsPerspectiveEnabled auf der ReactRootView setzt.

Wichtig: Die Eigenschaft IsPerspectiveEnabled ist experimentell und die Unterstützung dafür kann in Zukunft entfernt werden.

Ersteinrichtung

Voraussetzung: Befolgen Sie den Leitfaden zur Einrichtung nativer Module, um die Visual Studio-Infrastruktur für die Erstellung Ihres eigenen, eigenständigen nativen Moduls für React Native Windows zu erstellen.

Sobald Sie Ihre Entwicklungsumgebung und Projektstruktur eingerichtet haben, sind Sie bereit, Code zu schreiben.

Wenn Sie nur ein natives Modul zu Ihrer bestehenden React Native Windows-App hinzufügen möchten, d.h.

1. Sie haben den Leitfaden "Erste Schritte" befolgt, wo
2. Sie den Befehl init-windows verwendet haben, um Windows zu Ihrem Projekt hinzuzufügen, und
3. Sie Ihren nativen Code einfach zum App-Projekt unter dem Ordner windows hinzufügen.

Dann können Sie einfach die Visual Studio-Lösung im Ordner windows öffnen und die neuen Dateien direkt zum App-Projekt hinzufügen.

Wenn Sie stattdessen ein eigenständiges natives Modul erstellen oder einem bestehenden nativen Modul Windows-Unterstützung hinzufügen, lesen Sie zuerst den Leitfaden Einrichtung nativer Module.

Beispiel View Manager

C#

C++

Attribute

Attribut	Verwenden Sie
ViewManagerExportedViewConstant	Gibt ein Feld oder eine Eigenschaft an, die eine Konstante darstellt.
ViewManagerProperty	Gibt eine Methode an, die aufgerufen wird, um eine Eigenschaft für eine Instanz eines nativen UI-Widgets festzulegen.
ViewManagerCommand	Gibt eine Methode an, die für eine Instanz eines nativen UI-Widgets aufgerufen werden kann.

Für dieses Beispiel gehen wir davon aus, dass wir den folgenden CustomUserControl haben, den wir in React Native verwenden möchten.

CustomUserControl.cs:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ViewManagerSample
{
    public sealed class CustomUserControl : Control
    {
        public static DependencyProperty LabelProperty { get; private set; }

        public string Label
        {
            get
            {
                return (string)GetValue(LabelProperty);
            }
            set
            {
                SetValue(LabelProperty, value);
            }
        }

        static CustomUserControl()
        {
            LabelProperty = DependencyProperty.Register(
                nameof(Label),
                typeof(string),
                typeof(CustomUserControl),
                new PropertyMetadata(default(string))
                );
        }

        public CustomUserControl()
        {
            DefaultStyleKey = typeof(CustomUserControl);
        }
    }
}

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ViewManagerSample">

    <Style TargetType="local:CustomUserControl" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomUserControl">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Label}" TextAlignment="Center" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

1. Erstellung Ihres View Managers

Hier ist ein Beispiel für einen View Manager, der in C# geschrieben ist und CustomUserControlViewManager heißt.

CustomUserControlViewManager.cs:

using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Controls;

using Microsoft.ReactNative.Managed;
using System.Collections.Generic;

namespace ViewManagerSample
{
    internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl>
    {
        [ViewManagerProperty("label")]
        public void SetLabel(CustomUserControl view, string value)
        {
            if (null != value)
            {
                view.Label = value;
            }
            else
            {
                view.ClearValue(CustomUserControl.LabelProperty);
            }
        }

        [ViewManagerProperty("color")]
        public void SetColor(CustomUserControl view, Brush value)
        {
            if (null != value)
            {
                view.Foreground = value;
            }
            else
            {
                view.ClearValue(Control.ForegroundProperty);
            }
        }

        [ViewManagerProperty("backgroundColor")]
        public void SetBackgroundColor(CustomUserControl view, Brush value)
        {
            if (null != value)
            {
                view.Background = value;
            }
            else
            {
                view.ClearValue(Control.BackgroundProperty);
            }
        }

        [ViewManagerCommand]
        public void CustomCommand(CustomUserControl view, IReadOnlyList<object> commandArgs)
        {
            // Execute command
        }
    }
}

2. Registrierung Ihres View Managers

Wie bei nativen Modulen möchten wir unseren neuen CustomUserControlViewManager bei React Native registrieren, damit wir ihn tatsächlich verwenden können. Dazu erstellen wir zunächst einen ReactPackageProvider, der Microsoft.ReactNative.IReactPackageProvider implementiert.

ReactPackageProvider.cs:

using Microsoft.ReactNative.Managed;

namespace ViewManagerSample
{
    public partial class ReactPackageProvider : IReactPackageProvider
    {
        public void CreatePackage(IReactPackageBuilder packageBuilder)
        {
            CreatePackageImplementation(packageBuilder);
        }

        /// <summary>
        /// This method is implemented by the C# code generator
        /// </summary>
        partial void CreatePackageImplementation(IReactPackageBuilder packageBuilder);
    }
}

Hier haben wir die Methode CreatePackage implementiert, die packageBuilder erhält, um den Inhalt des Pakets zu erstellen.

Nachdem wir nun den ReactPackageProvider haben, ist es an der Zeit, ihn in unserer ReactApplication zu registrieren. Dies geschieht, indem wir den Provider einfach zur Eigenschaft PackageProviders hinzufügen.

App.xaml.cs:

using Microsoft.ReactNative;

namespace SampleApp
{
    sealed partial class App : ReactApplication
    {
        public App()
        {
            /* Other Init Code */

            PackageProviders.Add(new Microsoft.ReactNative.Managed.ReactPackageProvider()); // Includes any modules in this project
            PackageProviders.Add(new ViewManagerSample.ReactPackageProvider());

            /* Other Init Code */
        }
    }
}

Dieses Beispiel geht davon aus, dass sich der oben erstellte ViewManagerSample.ReactPackageProvider in einem anderen Projekt (Assembly) als unsere Anwendung befindet. Sie werden jedoch feststellen, dass wir standardmäßig auch einen Microsoft.ReactNative.Managed.ReactPackageProvider hinzugefügt haben.

Der Microsoft.ReactNative.Managed.ReactPackageProvider ist eine Erleichterung, die sicherstellt, dass alle nativen Module und View Manager, die im App-Projekt definiert sind, automatisch registriert werden. Wenn Sie Ihre View Manager also direkt im App-Projekt erstellen, müssen Sie keinen separaten ReactPackageProvider definieren.

Weitere Erweiterungspunkte

• In einigen Szenarien benötigt ein View Manager möglicherweise mehr Kontext zum Zeitpunkt der View-Erstellung, um zu entscheiden, welcher Steuerelementtyp instanziiert werden soll. Dies kann erreicht werden, indem der View Manager die Schnittstelle IViewManagerCreateWithProperties implementiert. Die Methode CreateViewWithProperties kann dann die in JSX gesetzten Eigenschaften abrufen, indem sie den propertyMapReader inspiziert.

-internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl> {
+internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl>, IViewManagerCreateWithProperties {
// rest of the view manager goes here...
+  // IViewManagerCreateWithProperties
+  public virtual object CreateViewWithProperties(Microsoft.ReactNative.IJSValueReader propertyMapReader) {
+    propertyMapReader.ReaderValue(out IDictionary<string, JSValue> propertyMap);
+    // create a XAML FrameworkElement based on properties in propertyMap
+    if (propertyMap.ContainsKey("foo)) { 
+      return new Button(); 
+    } else {
+      return new TextBox();
+    }
+  }
}
+}

• Ihr View Manager kann auch deklarieren, dass er für die eigene Größenbestimmung und Layoutverantwortung zuständig sein möchte. Dies ist nützlich in Szenarien, in denen Sie ein natives XAML-Steuerelement umschließen. Tun Sie dies, indem Sie die Schnittstelle Microsoft.ReactNative.IViewManagerRequiresNativeLayout implementieren.

-internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl> {
+internal class CustomUserControlViewManager : AttributedViewManager<CustomUserControl>, IViewManagerRequiresNativeLayout {
// rest of the view manager goes here...
+   // IViewManagerRequiresNativeLayout
+   virtual bool RequiresNativeLayout() { return true; }

Für dieses Beispiel gehen wir davon aus, dass wir bereits den CustomUserControl im C#-Beispiel definiert haben.

1. Erstellung Ihres View Managers

Hier ist ein Beispiel für einen View Manager, der in C++ geschrieben ist und CustomUserControlViewManager heißt.

CustomUserControlViewManager.h:

#pragma once

#include "pch.h"

#include "winrt/Microsoft.ReactNative.h"

namespace winrt::ViewManagerSample::implementation {

struct CustomUserControlViewManager : winrt::implements<
                                             CustomUserControlViewManager,
                                             winrt::Microsoft::ReactNative::IViewManager,
                                             winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithCommands,
                                             winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
                                             winrt::Microsoft::ReactNative::IViewManagerWithReactContext> {
 public:
  CustomUserControlViewManager() = default;

  // IViewManager
  winrt::hstring Name() noexcept;

  winrt::Windows::UI::Xaml::FrameworkElement CreateView() noexcept;

  // IViewManagerWithNativeProperties
  winrt::Windows::Foundation::Collections::
      IMapView<winrt::hstring, winrt::Microsoft::ReactNative::ViewManagerPropertyType>
      NativeProps() noexcept;

  void UpdateProperties(
      winrt::Windows::UI::Xaml::FrameworkElement const &view,
      winrt::Microsoft::ReactNative::IJSValueReader const &propertyMapReader) noexcept;

  // IViewManagerWithCommands
  winrt::Windows::Foundation::Collections::IVectorView<winrt::hstring> Commands() noexcept;

  void DispatchCommand(
      winrt::Windows::UI::Xaml::FrameworkElement const &view,
      winrt::hstring const &commandId,
      winrt::Microsoft::ReactNative::IJSValueReader const &commandArgsReader) noexcept;

  // IViewManagerWithExportedEventTypeConstants
  winrt::Microsoft::ReactNative::ConstantProviderDelegate ExportedCustomBubblingEventTypeConstants() noexcept;

  winrt::Microsoft::ReactNative::ConstantProviderDelegate ExportedCustomDirectEventTypeConstants() noexcept;

  // IViewManagerWithReactContext
  winrt::Microsoft::ReactNative::IReactContext ReactContext() noexcept;

  void ReactContext(winrt::Microsoft::ReactNative::IReactContext reactContext) noexcept;

private:
  winrt::Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
};

}

CustomUserControlViewManager.cpp:

#include "pch.h"
#include "CustomUserControlViewManager.h"

#include "JSValueReader.h"
#include "JSValueXaml.h"
#include "NativeModules.h"

using namespace winrt;
using namespace Microsoft::ReactNative;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;

using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Controls;

namespace winrt::ViewManagerSample::implementation {

// IViewManager
hstring CustomUserControlViewManager::Name() noexcept {
  return L"CustomUserControl";
}

FrameworkElement CustomUserControlViewManager::CreateView() noexcept {
  return winrt::ViewManagerSample::CustomUserControl();
}

// IViewManagerWithNativeProperties
IMapView<hstring, ViewManagerPropertyType> CustomUserControlViewManager::NativeProps() noexcept {
  auto nativeProps = winrt::single_threaded_map<hstring, ViewManagerPropertyType>();

  nativeProps.Insert(L"label", ViewManagerPropertyType::String);
  nativeProps.Insert(L"color", ViewManagerPropertyType::Color);
  nativeProps.Insert(L"backgroundColor", ViewManagerPropertyType::Color);

  return nativeProps.GetView();
}

void CustomUserControlViewManager::UpdateProperties(
    FrameworkElement const &view,
    IJSValueReader const &propertyMapReader) noexcept {
  if (auto control = view.try_as<winrt::ViewManagerSample::CustomUserControl>()) {

    const JSValueObject &propertyMap = JSValue::ReadObjectFrom(propertyMapReader);

    for (auto const &pair : propertyMap) {
      auto const &propertyName = pair.first;
      auto const &propertyValue = pair.second;

      if (propertyName == "label") {
        if (propertyValue != nullptr) {
          auto const &value = winrt::box_value(winrt::to_hstring(propertyValue.String()));
          control.Label(value);
        } else {
          control.ClearValue(winrt::ViewManagerSample::CustomUserControl::LabelProperty());
        }
      } else if (propertyName == "color") {
        if (auto value = propertyValue.To<Brush>()) {
          control.Foreground(value);
        } else {
          control.ClearValue(Control::ForegroundProperty());
        }
      } else if (propertyName == "backgroundColor") {
        if (auto value = propertyValue.To<Brush>()) {
          control.Background(value);
        } else {
          control.ClearValue(Control::BackgroundProperty());
        }
      }
    }
  }
}

// IViewManagerWithCommands
IVectorView<hstring> CustomUserControlViewManager::Commands() noexcept {
    auto commands = winrt::single_threaded_vector<hstring>();
    commands.Append(L"CustomCommand");
    return commands.GetView();
}

void CustomUserControlViewManager::DispatchCommand(
    FrameworkElement const &view,
    winrt::hstring const &commandId,
    winrt::Microsoft::ReactNative::IJSValueReader const &commandArgsReader) noexcept {
  if (auto control = view.try_as<winrt::ViewManagerSample::CustomUserControl>()) {
    if (commandId == L"CustomCommand") {
      const JSValueArray &commandArgs = JSValue::ReadArrayFrom(commandArgsReader);
      // Execute command
    }
  }
}

// IViewManagerWithExportedEventTypeConstants
ConstantProviderDelegate CustomUserControlViewManager::ExportedCustomBubblingEventTypeConstants() noexcept {
  return [](winrt::Microsoft::ReactNative::IJSValueWriter const& constantWriter) {
    // use constantWriter to define bubbling events, see ExportedCustomDirectEventTypeConstants
  }
}

ConstantProviderDelegate CustomUserControlViewManager::ExportedCustomDirectEventTypeConstants() noexcept {
  return [](winrt::Microsoft::ReactNative::IJSValueWriter const& constantWriter) {
    constantWriter.WritePropertyName(L"topMyEvent");
    constantWriter.WriteObjectBegin();
    WriteProperty(constantWriter, L"registrationName", L"onMyEvent");
    constantWriter.WriteObjectEnd();
  };
}

// IViewManagerWithReactContext
IReactContext CustomUserControlViewManager::ReactContext() noexcept {
  return m_reactContext;
}

void CustomUserControlViewManager::ReactContext(IReactContext reactContext) noexcept {
  m_reactContext = reactContext;
}

}

Weitere Erweiterungspunkte

• In einigen Szenarien benötigt ein View Manager möglicherweise mehr Kontext zum Zeitpunkt der View-Erstellung, um zu entscheiden, welcher Steuerelementtyp instanziiert werden soll. Dies kann erreicht werden, indem der View Manager die Schnittstelle IViewManagerCreateWithProperties implementiert.

struct CustomUserControlViewManager : winrt::implements<
                                             CustomUserControlViewManager,
                                             winrt::Microsoft::ReactNative::IViewManager,
                                             winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithCommands,
                                             winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
+                                             winrt::Microsoft::ReactNative::IViewManagerCreateWithProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithReactContext> {
+  // IViewManagerCreateWithProperties
+  winrt::Windows::Foundation::IInspectable CreateViewWithProperties(winrt::Microsoft::ReactNative::IJSValueReader const &propertyMapReader);

Die Methode CreateViewWithProperties kann dann die in JSX gesetzten Eigenschaften abrufen, indem sie den propertyMapReader inspiziert, genau wie in der Methode UpdateProperties.

• Ihr View Manager kann auch deklarieren, dass er für die eigene Größenbestimmung und Layoutverantwortung zuständig sein möchte. Dies ist nützlich in Szenarien, in denen Sie ein natives XAML-Steuerelement umschließen. Tun Sie dies, indem Sie die Schnittstelle winrt::Microsoft::ReactNative::IViewManagerRequiresNativeLayout implementieren.

struct CustomUserControlViewManager : winrt::implements<
                                             CustomUserControlViewManager,
                                             winrt::Microsoft::ReactNative::IViewManager,
                                             winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
                                             winrt::Microsoft::ReactNative::IViewManagerWithCommands,
                                             winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
+                                             winrt::Microsoft::ReactNative::IViewManagerRequiresNativeLayout,
                                             winrt::Microsoft::ReactNative::IViewManagerWithReactContext> {
+   // IViewManagerRequiresNativeLayout
+   bool RequiresNativeLayout() { return true; }

2. Registrierung Ihres View Managers

Wie bei nativen Modulen möchten wir unseren neuen CustomUserControlViewManager bei React Native registrieren, damit wir ihn tatsächlich verwenden können. Dazu erstellen wir zunächst einen ReactPackageProvider, der Microsoft.ReactNative.IReactPackageProvider implementiert.

ReactPackageProvider.idl:

namespace ViewManagerSample
{
    [webhosthidden]
    [default_interface]
    runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
    {
        ReactPackageProvider();
    };
}

Danach fügen wir die .h- und .cpp-Dateien hinzu.

ReactPackageProvider.h:

#pragma once

#include "ReactPackageProvider.g.h"

using namespace winrt::Microsoft::ReactNative;

namespace winrt::ViewManagerSample::implementation
{
    struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider>
    {
        ReactPackageProvider() = default;

        void CreatePackage(IReactPackageBuilder const& packageBuilder) noexcept;
    };
}

namespace winrt::ViewManagerSample::factory_implementation
{
    struct ReactPackageProvider : ReactPackageProviderT<ReactPackageProvider, implementation::ReactPackageProvider> {};
}

ReactPackageProvider.cpp:

#include "pch.h"
#include "ReactPackageProvider.h"
#include "ReactPackageProvider.g.cpp"

#include <ModuleRegistration.h>

// NOTE: You must include the headers of your native modules here in
// order for the AddAttributedModules call below to find them.
#include "CustomUserControlViewManager.h"

using namespace winrt::Microsoft::ReactNative;

namespace winrt::ViewManagerSample::implementation {

void ReactPackageProvider::CreatePackage(IReactPackageBuilder const& packageBuilder)
noexcept {
  packageBuilder.AddViewManager(
      L"CustomUserControlViewManager", []() { return winrt::make<CustomUserControlViewManager>(); });
}

} // namespace winrt::ViewManagerSample::implementation

Hier haben wir die Methode CreatePackage implementiert, die packageBuilder erhält, um den Inhalt des Pakets zu erstellen. Anschließend rufen wir AddViewManager mit dem Namen unseres View Managers und einem Lambda-Ausdruck auf, der eine Instanz des View Managers zurückgibt.

Nachdem wir nun den ReactPackageProvider haben, ist es an der Zeit, ihn in unserer ReactApplication zu registrieren. Dies geschieht, indem wir den Provider einfach zur Eigenschaft PackageProviders hinzufügen.

App.cpp:

#include "pch.h"

#include "App.h"
#include "ReactPackageProvider.h"

#include "winrt/ViewManagerSample.h"

namespace winrt::SampleApp::implementation {

App::App() noexcept {
  /* Other Init Code */

  PackageProviders().Append(make<ReactPackageProvider>()); // Includes all modules in this project
  PackageProviders().Append(winrt::ViewManagerSample::ReactPackageProvider());

  /* Other Init Code */
}

} // namespace winrt::SampleApp::implementation

Dieses Beispiel geht davon aus, dass sich der oben erstellte ViewManagerSample::ReactPackageProvider in einem anderen Projekt (Assembly) als unsere Anwendung befindet. Sie werden jedoch feststellen, dass wir standardmäßig auch einen SampleApp::ReactPackageProvider hinzugefügt haben.

Der SampleApp::ReactPackageProvider ist eine Erleichterung, die sicherstellt, dass alle nativen Module und View Manager, die im App-Projekt definiert sind, automatisch registriert werden. Wenn Sie also Ihre nativen Module direkt im App-Projekt erstellen, müssen Sie keinen separaten ReactPackageProvider definieren.

3. Verwendung Ihres View Managers in JSX

ViewManagerSample.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  Button,
  requireNativeComponent,
  StyleSheet,
  UIManager,
  View,
} from 'react-native';

let CustomUserControl = requireNativeComponent('CustomUserControl');

class ViewManagerSample extends Component {
  onPress() {
    if (_customControlRef) {
      const tag = findNodeHandle(this._customControlRef);
      UIManager.dispatchViewManagerCommand(tag, 
        UIManager.getViewManagerConfig('CustomUserControl').Commands.CustomCommand,
        ['arg1', 'arg2']);
    }
  }

  render() {
    return (
      <View style={styles.container}>
         <CustomUserControl style={styles.customcontrol} 
           label="CustomUserControl!" 
           ref={(ref) => { this._customControlRef = ref; }} />
         <Button onPress={() => { this.onPress(); }} 
           title="Call CustomUserControl Commands!" />
      </View>);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  customcontrol: {
    color: '#333333',
    backgroundColor: '#006666',
    width: 200,
    height: 20,
    margin: 10,
  },
});

AppRegistry.registerComponent('ViewManagerSample', () => ViewManagerSample);