عرض مصدر ReactNative/native components ios

<noinclude>{{DISPLAYTITLE: مكونات واجهة المستخدم الأصيلة لنظام iOS في React Native}}</noinclude>
هناك الكثير من أدوات واجهة المستخدم (UI widgets) الأصيلة الجاهزة للاستخدام في أحدث التطبيقات، بعضها جزء من المنصّة، والبعض الآخر متاح كمكتبات تابعة لجهات طرف ثالث (third-party libraries)، إضافة إلى ما تستخدمه أنت كذلك. يحتوي React Native على العديد من مكوّنات المنصّة الأكثر أهمية، وهي جاهزة للاستخدام، مثل <code>[[ReactNative/scrollview|ScrollView]]</code> و<code>[[ReactNative/textinput|TextInput]]</code>، ولكن ليس جميعها، وبالطبع، فهذا لا يشمل تلك التي قد تكون كتبتها بنفسك. لحسن الحظ، من السهل جدًا تغليف هذه المكونات الحالية لإدماجها بسلاسة مع تطبيق React Native الخاص بك.

على غرار صفحة [[ReactNative/native modules ios|الوحدات الأصيلة]]، فهذا الدليل كذلك أكثر تقدمًا، ويَفترِض أنك معتاد إلى حد ما على برمجة iOS. سيوضح لك هذا الدليل كيفية إنشاء مكون واجهة مستخدم أصيل، وسيرشدك إلى كتابة مجموعة فرعيّة من مكون <code>MapView</code> الموجود في مكتبة React Native الأساسية (the core React Native library).

== مثال MapView لنظام iOS ==
لنفترض أننا نريد إضافة خريطة تفاعلية إلى تطبيقنا، لنستخدم مكتبة [https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html <code>MKMapView</code>]، سنحتاج فقط إلى جعلها قابلة للاستخدام من جهة JavaScript.

تُنشأ الواجهات أو العروض الأصيلة وتُعالَج (أو تُدارُ) بواسطة أصناف فرعية من الصنف <code>RCTViewManager</code>. تشبه هذه الصفات الفرعية في وظيفتها مُتحكّماتِ الواجهات (view controllers)، لكنّها أساسًا مفردة (singletons)، أي أن الجسر يُنشئ نسخة واحدة فقط من كل منها. وتُوفّر الوصول إلى الواجهات الأصيلة للصنف <code>RCTUIManager</code>، الذي يُفوِّضها مرة أخرى لتعيين وتحديث خاصيات الواجهات حسب الضرورة. عادةً ما تكون أصناف <code>RCTViewManager</code> هي المفوَّضَةُ لتمثيل الواجهات (delegates for the views)، مُرسِلةً الأحداثَ إلى JavaScript مُجدّدًا عبر الجسر.

عمليّة توفير الوصول إلى واجهة بسيطة:

* أنشئ صنفًا فرعيًّا من <code>RCTViewManager</code> لإنشاء مُعالجٍ لإدارة مُكوِّنك.
* أضف ماكرو التعليم (marker macro) لتصدير الوحدة بالسطر ‎‎<code>RCT_EXPORT_MODULE()</code>‎‎.
* اكتب التابع ‎‎<code>-(UIView *)view</code>‎‎.

<syntaxhighlight lang="objective-c">
// RNTMapManager.m
#import <MapKit/MapKit.h>

#import <React/RCTViewManager.h>

@interface RNTMapManager : RCTViewManager
@end

@implementation RNTMapManager

RCT_EXPORT_MODULE(RNTMap)

- (UIView *)view
{
  return [[MKMapView alloc] init];
}

@end
</syntaxhighlight>

'''ملاحظة:''' لا تحاول تعيين الخاصيّة ‎‎<code>frame</code>‎‎ أو ‎‎<code>backgroundColor</code>‎‎على نسخة <code>UIView</code> التي وفَّرْتَ الوصول إليها من خلال التابع ‎‎<code>-view</code>‎‎. سيكتب React Native فوق القيم التي تُعيِّنها بواسطة صنفك المُخصَّص للتوافق مع خاصيّات JavaScript المسؤولة عن تخطيط (layout) مكوِّنِك. إذا كنت بحاجة إلى دقة التحكم هذه، فقد يكون من الأفضل تغليف نسخةِ الصنف <code>UIView</code> الذي تريد تصميمه في صنف <code>UIView</code> آخر وإعادة الصّنف <code>UIView</code> المُغلَّف بدلاً من ذلك. انظر  [https://github.com/facebook/react-native/issues/2948 هذه الصفحة] للاستزادة.

في المثال أعلاه، قمنا باستعمال البادئة <code>RNT</code> في اسم الصنف الذي أنشأناه. تُستخدَم البادئات لتجنب تضارب الأسماء (name collisions) مع الأطر الأخرى. تستخدم أطر عمل Apple بادئات مؤلفة من حرفين، ويستخدم React Native المقطع <code>RCT</code> كبادئة. نوصي باستخدام بادئة من ثلاثة أحرف بخلاف <code>RCT</code> في أصنافك الخاصّة لتفادي تضارب الأسماء.

بعد ذلك، ستحتاج فقط إلى القليل من شيفرة JavaScript لجعله مكونَ React جاهز للاستخدام:
<syntaxhighlight lang="javascript">
// MapView.js

import { requireNativeComponent } from 'react-native';

// requireNativeComponent automatically resolves 'RNTMap' to 'RNTMapManager'
module.exports = requireNativeComponent('RNTMap');

// MyApp.js

import MapView from './MapView.js';

...

render() {
  return <MapView style={{ flex: 1 }} />;
}
</syntaxhighlight>
تأكد من استخدام <code>RNTMap</code> هنا. نريد طَلَب (أو استيراد require) المُعالج (manager) هنا، والذي سيُوفِّر الوصول إلى واجهة المُعالج لاستخدامه في JavaScript.

'''ملاحظة''': عند التصيير (rendering)، لا تنس تمديد الواجهة كي لا تظهر شاشةٌ فارغة.
<syntaxhighlight lang="javascript">
  render() {
    return <MapView style={{flex: 1}} />;
  }
</syntaxhighlight>

أصبح هذا المكون الآن واجهة خريطة أصيلٍ كاملِ الوظائف قابلٍ للاستخدام في JavaScript، مع دعم كامل المميّزات كالقَرْصِ للتكبير وغيرها من الإيماءات الأصيلة. لكن للأسف لا يمكننا التحكم به من JavaScript حتى الآن.

==الخاصيات==
أول ما يمكننا القيام به لجعل هذا المكوّن قابلًا للاستخدام أكثر هو نقل بعض الخاصيّات الأصيلة عبر الجسر. لنقل أننا نريد التمكّن من تعطيل التكبير وتحديد المنطقة المرئية. يُمكن تعطيل التكبير بقيمة منطقيّة بسيطة، لذا سنضيف هذا السطر:
<syntaxhighlight lang="objective-c">
// RNTMapManager.m
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
</syntaxhighlight>

لاحظ أننا نحدّد النّوع بوضوح على أنّه قيمة منطقيّة ‎‎<code>BOOL</code>‎‎) لأنّ React Native يستخدم <code>RCTConvert</code> خلف الكواليس لتحويل العديد من أنواع البيانات المختلفة عند نقل البيانات عبر الجسر، وسوف تعرض القيم السيئة رسائل خطأِ صندوقٍ أحمر "RedBox" لإعلامك بوجود مشكلة حالًا. وإن سار كل شيء على ما يُرام كهذه الحالة، فسيعتني هذا الماكرو بالأمر.

لتعطيل التكبير الآن، عيِّن الخاصيّة في JavaScript:
<syntaxhighlight lang="javascript">
// MyApp.js
<MapView zoomEnabled={false} style={{flex: 1}} />
</syntaxhighlight>
لتوثيق الخاصيات (والقيم التي تقبلها) لمكوّن <code>MapView</code> الخاص بنا، سنضيف مكونًا مُغلِّفًا (wrapper component) وسنوثّق الواجهة باستعمال خاصيّة <code>PropTypes</code> في React:
<syntaxhighlight lang="javascript">
// MapView.js
import PropTypes from 'prop-types';
import React from 'react';
import { requireNativeComponent } from 'react-native';

class MapView extends React.Component {
  render() {
    return <RNTMap {...this.props} />;
  }
}

MapView.propTypes = {
  /**
   * A Boolean value that determines whether the user may use pinch
   * gestures to zoom in and out of the map.
   */
  zoomEnabled: PropTypes.bool
};

var RNTMap = requireNativeComponent('RNTMap', MapView);

module.exports = MapView;
</syntaxhighlight>
لدينا الآن مكوّن مُغلَّف وموثَّق سهلُ الاستخدام. لاحظ أننا غيَّرنا معامل الدالة ‎‎<code>requireNativeComponent</code>‎‎ الثاني من ‎‎<code>null</code>‎‎ إلى المكوّن <code>MapView</code> المُغلِّف الجديد. يسمح هذا للبنية التحتيّة بالتحقق من أنّ أنواع propTypes تتطابق مع الخاصيات الأصيلة لتقليل فرص عدم التطابق بين شيفرة Objective-C وشيفرة JavaScript.

بعد ذلك، لِنُضِف الخاصيّة ‎‎<code>region</code>‎‎ الأعقَد. نبدأ بإضافة الشيفرة الأصيلة:
<syntaxhighlight lang="objective-c">
// RNTMapManager.m
RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
  [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}
</syntaxhighlight>
هذا أعقد من حالة <code>BOOL</code> البسيطة سابقًا. لدينا الآن نوعٌ باسم <code>MKCoordinateRegion</code> يحتاج إلى دالّة تحويل (conversion function)، ولدينا شيفرة مخصصّة لتحريك الواجهة عند ضبط المنطقة (region) من JavaScript. داخل جسم الدالّة التي نُقدِّمها، يشير <code>json</code> إلى القيمة الأولية (raw value) التي مُرِّرَت من JavaScript. هناك أيضًا متغيّرُ ‎‎<code>view</code>‎‎ يتيح لنا الوصول إلى نسخة مُعالج (أو مُدير) الواجهة، ونستخدم ‎‎<code>defaultView</code>‎‎ لإعادة تعيين الخاصية إلى القيمة الافتراضية إذا أرسلت شيفرة JavaScript القيمة ‎‎<code>null</code>‎‎.

يمكنك كتابة أي دالّة تحويلٍ تريدها لعَرضِك، إليك إجراء <code>MKCoordinateRegion</code> عبر فئةٍ (category) على <code>RCTConvert</code>. يستخدم هذا فئةً موجودة بالفعل من ReactNative باسم ‎‎<code>RCTConvert+CoreLocation</code>‎‎:
<syntaxhighlight lang="objective-c">
// RNTMapManager.m

#import "RCTConvert+Mapkit.h"

// RCTConvert+Mapkit.h

#import <MapKit/MapKit.h>
#import <React/RCTConvert.h>
#import <CoreLocation/CoreLocation.h>
#import <React/RCTConvert+CoreLocation.h>

@interface RCTConvert (Mapkit)

+ (MKCoordinateSpan)MKCoordinateSpan:(id)json;
+ (MKCoordinateRegion)MKCoordinateRegion:(id)json;

@end

@implementation RCTConvert(MapKit)

+ (MKCoordinateSpan)MKCoordinateSpan:(id)json
{
  json = [self NSDictionary:json];
  return (MKCoordinateSpan){
    [self CLLocationDegrees:json[@"latitudeDelta"]],
    [self CLLocationDegrees:json[@"longitudeDelta"]]
  };
}

+ (MKCoordinateRegion)MKCoordinateRegion:(id)json
{
  return (MKCoordinateRegion){
    [self CLLocationCoordinate2D:json],
    [self MKCoordinateSpan:json]
  };
}

@end
</syntaxhighlight>

دوال التحويل هذه مُصمَّمةٌ لمعالجة بيانات JSON بأمان، والتي قد ترميها JavaScript عبر عرض رسائل أخطاء الصندوق الأحمر وعند إرجاع قيم التهيئة القياسية (standard initialization values) عند فقدان المفاتيح أو أخطاء تطوير الأخرى.

لإكمال دعم الخاصيّة ‎‎<code>region</code>‎‎، نحتاج إلى توثيقها باستخدام <code>propTypes</code> (أو سنحصل على رسالة خطأ أن الخاصية الأصيلة غير مُوثَّقة)، بعدها يُمكننا ضبطها مثل أي خاصيّة أخرى:
<syntaxhighlight lang="javascript">
// MapView.js

MapView.propTypes = {
  /**
   * A Boolean value that determines whether the user may use pinch
   * gestures to zoom in and out of the map.
   */
  zoomEnabled: PropTypes.bool,

  /**
   * The region to be displayed by the map.
   *
   * The region is defined by the center coordinates and the span of
   * coordinates to display.
   *المنطقة التي ستُعرَض في الخريطة
   *
   * تُحدَّد المنطقة عبر إحداثيات المركز ومجالها
   */
  region: PropTypes.shape({
    /** 
      * إحداثيات مركز الخريطة
     * Coordinates for the center of the map.
     */
    latitude: PropTypes.number.isRequired,
    longitude: PropTypes.number.isRequired,

    /**
     * Distance between the minimum and the maximum latitude/longitude
     * to be displayed.
     * المسافة بين الحد الأدنى والأقصى لكل من خطي العرض والطول
     */
    latitudeDelta: PropTypes.number.isRequired,
    longitudeDelta: PropTypes.number.isRequired,
  }),
};

// MyApp.js

render() {
  var region = {
    latitude: 37.48,
    longitude: -122.16,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
  };
  return (
    <MapView
      region={region}
      zoomEnabled={false}
      style={{ flex: 1 }}
    />
  );
}
</syntaxhighlight>
يمكنك هنا أن ترى أن شكل المنطقة واضح في توثيق JavaScript، مثاليًّا يمكننا توليد جزء من هذه الشيفرة تلقائيًّا، لكن هذه الميّزة غير متوفّرة حاليًّا.

أحيانًا، سيكون للمكوّن الأصيل بعض الخاصيات الخاصة التي لا تريد أن تكون جزءًا من واجهة برمجة التطبيقات لمكون React ذو العلاقة. مثلًا، يحتوي <code>Switch</code> على معالج <code>onChange</code> مخصَّص للحدث الأصيل الأوليّ (raw native event)، ويُوفّر الوصولَ إلى خاصيّة المعالجة <code>onValueChange</code> التي تُستدعى بالقيمة المنطقية فقط بدلاً من الحدث الأوليّ. ولأنّك لا تريد أن تكون هذه الخاصيات (الأصيلة حصرًا) جزءًا من واجهة برمجة التطبيقات، فأنت لا تريد وضعها في أنواع <code>propTypes</code>، ولكن إذا لم تفعل فستحصل على خطأ. الحل هو ببساطة إضافتها إلى الخيار ‎‎<code>nativeOnly</code>‎‎، مثلًا:
<syntaxhighlight lang="javascript">
var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
  nativeOnly: { onChange: true }
});
</syntaxhighlight>

==الأحداث (Events)==
لدينا الآن مكوّن خريطة أصيل يمكننا التحكم فيه بسهولة من JavaScript، لكن كيف نتعامل مع أحداث المستخدم (User events)، مثل القرص للتكبير أو للتصغير أو المسح (panning) لتغيير المنطقة المرئية؟

إلى الآن، قمنا فقط بإرجاع نسخة <code>MKMapView</code> من تابع ‎‎<code>-(UIView *)view</code>‎‎ الخاص بمعالج الإدارة (manager). لا يمكننا إضافة خاصيات جديدة إلى <code>MKMapView</code> لذلك علينا إنشاء صنف فرعيّ جديد من <code>MKMapView</code>، والذي سنستخدمه لواجهتنا. يُمكننا بعد ذلك إضافة دالة ردّ نداءٍ (callback) باسم ‎‎<code>onRegionChange</code>‎‎ إلى هذا الصنف الفرعيّ:
<syntaxhighlight lang="objective-c">
// RNTMapView.h

#import <MapKit/MapKit.h>

#import <React/RCTComponent.h>

@interface RNTMapView: MKMapView

@property (nonatomic, copy) RCTBubblingEventBlock onRegionChange;

@end

// RNTMapView.m

#import "RNTMapView.h"

@implementation RNTMapView

@end
</syntaxhighlight>

لاحظ أن جميع أحداث <code>RCTBubblingEventBlock</code> يجب أن تكون مسبوقة بالمقطع <code>on</code>. بعد ذلك، صرِّح (declare) عن خاصية معالجة أحداث (event handler property) على <code>RNTMapManager</code>، واجعلها مفوَّضةً لجميع الواجهات التي توفّر الوصول إليها، وأعِد توجيه الأحداث إلى JavaScript عن طريق استدعاء كتلة معالج الأحداث (event handler block) من الواجهة الأصيلة.
<syntaxhighlight lang="objective-c">
// RNTMapManager.m

#import <MapKit/MapKit.h>
#import <React/RCTViewManager.h>

#import "RNTMapView.h"
#import "RCTConvert+Mapkit.h"

@interface RNTMapManager : RCTViewManager <MKMapViewDelegate>
@end

@implementation RNTMapManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)
{
    [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

- (UIView *)view
{
  RNTMapView *map = [RNTMapView new];
  map.delegate = self;
  return map;
}

#pragma mark MKMapViewDelegate

- (void)mapView:(RNTMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
  if (!mapView.onRegionChange) {
    return;
  }

  MKCoordinateRegion region = mapView.region;
  mapView.onRegionChange(@{
    @"region": @{
      @"latitude": @(region.center.latitude),
      @"longitude": @(region.center.longitude),
      @"latitudeDelta": @(region.span.latitudeDelta),
      @"longitudeDelta": @(region.span.longitudeDelta),
    }
  });
}
@end
</syntaxhighlight>

تُستدعى في التابع المفوَّض ‎‎<code>-mapView:regionDidChangeAnimated:</code>‎‎ كتلة معالج الأحداث على الواجهة المتوافقة مع بيانات المنطقة، وينتج عن استدعاء كتلة معالج الأحداث <code>onRegionChange</code> استدعاءُ نفس خاصيّة رد النداء في JavaScript. تُستدعى دالّة رد النداء هذه مع الحدث الأولي، والذي نقوم بمعالجته عادةً في المكوِّن المُغلِّف لتبسيط واجهة برمجة التطبيقات:
<syntaxhighlight lang="javascript">

// MapView.js

class MapView extends React.Component {
  _onRegionChange = (event) => {
    if (!this.props.onRegionChange) {
      return;
    }

    // معالجة الحدث الأوليّ
    this.props.onRegionChange(event.nativeEvent);
  }
  render() {
    return (
      <RNTMap
        {...this.props}
        onRegionChange={this._onRegionChange}
      />
    );
  }
}
MapView.propTypes = {
  /**
   * Callback that is called continuously when the user is dragging the map.
 * دالة رد نداء تُستدعى باستمرار عندما يسحب المستخدم الخريطة
   */
  onRegionChange: PropTypes.func,
  ...
};

// MyApp.js

class MyApp extends React.Component {
  onRegionChange(event) {
    // Do stuff with event.region.latitude, etc.
   // تعامل مع القيمة
    // event.region.latitude
    // وغيرها من القيم
  }

  render() {
    var region = {
      latitude: 37.48,
      longitude: -122.16,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1,
    };
    return (
      <MapView
        region={region}
        zoomEnabled={false}
        onRegionChange={this.onRegionChange}
      />
    );
  }
}
</syntaxhighlight>

== التعامل مع عدة واجهات أصيلة ==
يمكن أن يكون لواجهة React Native عدة أبناء في شجرة الواجهات، مثلًا:<syntaxhighlight lang="javascript">
<View>
  <MyNativeView />
  <MyNativeView />
  <Button />
</View>
</syntaxhighlight>في هذا المثال يغلف الصنف <code>MyNativeView</code> المكون <code>NativeComponent</code> ويقدم الدوال التي ستستدعى على منصة iOS. يعرَّف <code>MyNativeView</code> في  <code>MyNativeView.ios.js</code> ويحوي دوال الوكيل الموجودة في <code>NativeComponent.</code>

عندما يتفاعل المستخدم مع المكون بالنقر على الزر يتغير لون الخلفية <code>backgroundColor</code> الخاص بالواجهة <code>MyNativeView</code>، في هذه الحالة لن يعلم <code>UIManager</code> أي مكون <code>MyNativeView</code> يجب أن يعالج وأي منها سيغير <code>backgroundColor</code>، ستحل هذه المشكلة بالطريقة التالية:<syntaxhighlight lang="javascript">
<View>
  <MyNativeView ref={this.myNativeReference} />
  <MyNativeView ref={this.myNativeReference2} />
  <Button
    onPress={() => {
      this.myNativeReference.callNativeMethod();
    }}
  />
</View>
</syntaxhighlight>الأى يحوي المكون مرجعًا إلى <code>MyNativeView</code> محدّد مما يسمح لنا باستخدام نسخة محددة من <code>MyNativeView</code>. الآن يستطيع الزر أن يعرف لأي <code>MyNativeView</code> يجب أن يغير <code>backgroundColor</code> .في هذا المثال لنفرض أن <code>callNativeMethod</code> هي التي تغير <code>backgroundColor</code>.

سيحوي <code>MyNativeView.ios.js</code> شيفرة كما يلي:<syntaxhighlight lang="javascript">
class MyNativeView extends React.Component {
  callNativeMethod = () => {
    UIManager.dispatchViewManagerCommand(
      ReactNative.findNodeHandle(this),
      UIManager.getViewManagerConfig('RNCMyNativeView').Commands
        .callNativeMethod,
      []
    );
  };

  render() {
    return <NativeComponent ref={NATIVE_COMPONENT_REF} />;
  }
}
</syntaxhighlight><code>callNativeMethod</code> هي دالتنا المخصصة في iOS والتي تغير <code>backgroundColor</code> كمثال، والتي تعرض من خلال <code>MyNativeView</code>. تستخدم هذه الدالة <code>UIManager.dispatchViewManagerCommand</code> والتي تحتاج ثلاثة معاملات:

* <code>(nonnull NSNumber \*)reactTag</code> : الرقم المعرف لواجهة react.
* <code>commandID:(NSInteger)commandID</code> : الرقم المعرف للدالة الأصيلةالتي يجب استدعاؤها.
* <code>commandArgs:(NSArray<id> \*)commandArgs</code> : معاملات الدالة الأصيلة التي يمكن أن نمررها من JS  إلى native.

إليك الملف <code>RNCMyNativeViewManager.m</code>:<syntaxhighlight lang="javascript">
#import <React/RCTViewManager.h>
#import <React/RCTUIManager.h>
#import <React/RCTLog.h>

RCT_EXPORT_METHOD(callNativeMethod:(nonnull NSNumber*) reactTag) {
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
        NativeView *view = viewRegistry[reactTag];
        if (!view || ![view isKindOfClass:[NativeView class]]) {
            RCTLogError(@"Cannot find NativeView with tag #%@", reactTag);
            return;
        }
        [view callNativeMethod];
    }];

}
</syntaxhighlight>تعرَّف <code>callNativeMethod</code> في الملف <code>RNCMyNativeViewManager.m،</code> وتحوي معاملًا واحدًا فقط هو <code>(nonnull NSNumber*) reactTag</code>. ستجد هذه الدالة المصدرة علاضًا معينًا يستخدم <code>addUIBlock</code> ويحوي المعامل <code>viewRegistry</code> ويعيد المكون اعتمادًا على <code>reactTag</code> مما يسمح له باستدعاء الدالة على المكون الصحيح.

==الأنماط (Styles)==
لأنّ جميع واجهات [[React]] الأصيلة (native react views) الخاصة بنا هي أصناف فرعية من الصنف <code>UIView</code>، فإنّ معظم سمات الأنماط (style attributes) ستعمل كالمتوقّع تلقائيًّا. لكن ستحتاج بعض المكونات إلى نمط افتراضي، مثلًا، <code>UIDatePicker</code> يحتاج إلى حجم ثابت. هذا النمط الافتراضي مهم لتعمل خوارزمية التخطيط كما يجب، لكننا نريد أيضًا التمكّن من الكتابة فوق النمط الافتراضي وتغييره عند استخدام المكوّن. يقوم المكوّن <code>DatePickerIOS</code> بهذا عن طريق تغليف المكون الأصيل في واجهة إضافية تتميّز بتنسيق مرن، وباستخدام نمط ثابت (الذي يولَّد بثوابت تُمرَّر من الجزء الأصيل) على المكون الأصيل الداخلي:
<syntaxhighlight lang="javascript">
// DatePickerIOS.ios.js

import { UIManager } from 'react-native';
var RCTDatePickerIOSConsts = UIManager.RCTDatePicker.Constants;
...
  render: function() {
    return (
      <View style={this.props.style}>
        <RCTDatePickerIOS
          ref={DATEPICKER}
          style={styles.rkDatePickerIOS}
          ...
        />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  rkDatePickerIOS: {
    height: RCTDatePickerIOSConsts.ComponentHeight,
    width: RCTDatePickerIOSConsts.ComponentWidth,
  },
});

</syntaxhighlight>
تُصدَّر ثوابت <code>RCTDatePickerIOSConsts</code> من الجزء الأصيل عبر الحصول على الإطار (frame) الفعلي للمكون الأصيل كما يلي:
<syntaxhighlight lang="objective-c">
// RCTDatePickerManager.m

- (NSDictionary *)constantsToExport
{
  UIDatePicker *dp = [[UIDatePicker alloc] init];
  [dp layoutIfNeeded];

  return @{
    @"ComponentHeight": @(CGRectGetHeight(dp.frame)),
    @"ComponentWidth": @(CGRectGetWidth(dp.frame)),
    @"DatePickerModes": @{
      @"time": @(UIDatePickerModeTime),
      @"date": @(UIDatePickerModeDate),
      @"datetime": @(UIDatePickerModeDateAndTime),
    }
  };
}
</syntaxhighlight>
غطَّى هذا الدليل العديد من جوانب تجسير المكونات الأصيلة المخصصة، ولكن هناك الكثير مما قد تحتاج إلى أخذه على عين الاعتبار، مثل الخطافات المخصصة (custom hooks) لإدراج الواجهات الفرعية وتخطيطها. إذا أردت التعمق أكثر، انظر [https://github.com/facebook/react-native/blob/master/React/Views الشيفرة المصدريّة] لبعض من مكوّنات React Native.

== مصادر ==
* [https://facebook.github.io/react-native/docs/native-components-ios صفحة Native UI Components في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]