آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش native component برای طراحی رابط کاربری در React Native

دوره های مرتبط با این مقاله

native component برای طراحی رابط کاربری در React Native (مخصوص سیستم عامل Android)

native component های زیادی وجود دارد، بعضی بخشی از پلتفرم هستند، بعضی در library های خارجی قابل دسترس هستند، و حتی بعضی componentهایی هستند که خودتان در application های قبلی تان ساخته و استفاده کرده اید. React Native بیشتر component های مهم را در اختیار شما می گذارد، مثل ScrollView و TextInput، اما گاهی ممکن است به component نیاز داشته باشیم که در React Native نیست. خوشبختانه به سادگی می توان این component های موجود را درون یک React Native application استفاده کرد.

این بخش آموزشی پیشرفته است و فرض بر این است که با برنامه نویسی andriod آشنا هستید. به شما می آموزیم چگونه یک native component بسازید و برای این کار مثالی از کامپوننت ImageView می آوریم که در کتابخانه React Native وجود دارد.

مثال

در این مثال، مراحل پیاده سازی هر آنچه برای استفاده از ImageViews در JavaScript، نیاز است بیان می کنیم.

native view ها با extend کردن ViewManager، یا اغلب SimpleViewManager، ساخته می شوند و قابل تغییرند. در این مورد SimpleViewManager مناسب است چرا که property های رایجی مثل background، color، opacity و Flexbox layout را اعمال می کند.

این زیرکلاس ها singleton هستند. فقط یک نمونه از آن ها توسط bridge ساخته می شود. آن ها native view ها را به NativeViewHierarchyManager می دهند، که مقداردهی و تغییر property های view را در زمان لازم، به خودشان واگذار می کند. ViewManager ها معمولا delegate هایی برای view ها هستند، و event ها را توسط bridge به JavaScript می فرستند.

vend کردن یک view بسیار ساده است:


  • زیرکلاس ViewManager را بسازید.
  • متد createViewInstance را پیاده سازی کنید.
  • متدهای setter property ها را با استفاده از @ReactProp (یا @ReactPropGroup) نشانه گذاری کنید تا از بیرون قابل دسترس باشند.
  • manager را در package createViewManagers مربوط به application رجیستر کنید.
  • ماژول JavaScript آن را بسازید.

1. زیرکلاس ViewManager را بسازید

در این مثال، کلاس ReactImageManager را ساخته ایم که SimpleViewManager از نوع ReactImageView را extend می کند. ReactImageView نوع object ایست که توسط manager مدیریت می شود، این native view سفارشی ما خواهد بود. مقدار نام بازگشتی از متد getName برای reference به این نوع view در JavaScript استفاده می شود.


...
public class ReactImageManager extends SimpleViewManager< reactimageview > {
  public static final String REACT_CLASS = "RCTImageView";
  @Override
  public String getName() {
    return REACT_CLASS;
  }

2. createViewInstance را پیاده سازی کنید

View ها در متد createViewInstance ساخته می شوند، View باید خودش را به وضعیت پیش فرض initialize کند. property ها توسط فراخوانی updateView بعدا مقداردهی می شوند.


  @Override
  public ReactImageView createViewInstance(ThemedReactContext context) {
    return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext);
  }

3. متدهای setter property ها را با استفاده از @ReactProp (یا @ReactPropGroup) نشانه گذاری کنید تا از بیرون قابل دسترس باشند.

property هایی که می خواهیم در JavaScript قابل دسترس باشند باید به صورت متدهای setter نوشته و به این شیوه نشانه گذاری شوند. متد setter باید view مورد نظر برای تغییر را به عنوان آرگومان اصلی بگیرد و مقدار property را به عنوان آرگومان دوم بگیرد. به صورت متدهای void تعریف شود، و دسترسی public داشته باشد. نوع property که به JavaScript ارسال می شود به طور خودکار براساس نوع مقدار آرگومان تعیین می شود. درحال حاضر انواع boolean، int، float، double، String، Boolean، Integer، ReadableArray و ReadableMap پشتیبانی می شوند.

نشانه ReactProp@ یک آرگومان اجباری name از نوع String دارد. نام نسبت داده شده به ReactProp@ برای reference دادن به آن property (که متد برای مقداردهی به آن نوشته شده) در JavaScript استفاده می شود.

به غیر از name، آرگومان های اختیاری دیگری نیز می توان برای ReactProp@ استفاده کرد:

defaultBoolean، defaultInt و defaultFloat. این آرگومان ها باید از نوع boolean، int و float باشند و مقدار نسبت داده شده به آن ها به متد Setter ارسال می شود تا درصورتی که property که متد به آن ارجاع می کند از component حذف شده باشد، از آن استفاده شود. دقت کنید مقادیر "default" فقط برای انواع داده اصلی است، اگر setter از انواع پیچیده تری است، درصورتی که property که متد به آن ارجاع می کند از component حذف شده باشد ، به طور پیش فرض مقدار آن null می شود.

نیازمندی های تعریف Setter برای متدهایی که با ReactPropGroup@ نشانه گذاری شده اند متفاوت است. برای اطلاعات بیشتر در این مورد به مستندات مربوط به آن مراجعه کنید.

مهم! در ReactJS، تغییر مقدار یک property موجب فراخوانی متد setter می شود. یکی از راه های آپدیت یک component حذف property هایی از آن است که قبلا مقداردهی شده اند. در این صورت، متد setter فراخوانی می شود تا به manager بگوید property تغییر کرده است و مقدار " default " آن استفاده می شود.


@ReactProp(name = "src")
  public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
    view.setSource(sources);
  }
  @ReactProp(name = "borderRadius", defaultFloat = 0f)
  public void setBorderRadius(ReactImageView view, float borderRadius) {
    view.setBorderRadius(borderRadius);
  }
  @ReactProp(name = ViewProps.RESIZE_MODE)
  public void setResizeMode(ReactImageView view, @Nullable String resizeMode) {
    view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
  }

4. register کردن manager

آخرین گام در Java این است که ViewManager را به application بشناسانید. روش این کار همانند روش register کردن ماژول های native است، توسط متد createViewManagers:


@Override
  public List< viewmanager > createViewManagers(
                            ReactApplicationContext reactContext) {
    return Arrays.< viewmanager >asList(
      new ReactImageManager()
    );
  }
>

5. پیاده سازی ماژول JavaScript

آخرین گام ساخت یک ماژول JavaScriptی است که برای کاربران native view، لایه واسط بین Java و JavaScript خواهد بود.


// ImageView.js
import {requireNativeComponent} from 'react-native';
/**
 * Composes `View`.
 *
 * - src: string
 * - borderRadius: number
 * - resizeMode: 'cover' | 'contain' | 'stretch'
 */
module.exports = requireNativeComponent('RCTImageView');

متد requireNativeComponent نام native view را می گیرد. اگر component قرار است کاری پیچیده انجام دهد (مثلا Event handling انجام دهد)، باید آن را درون یک component React Native قرار دهید. چگونگی این کار در مثال MyCustomView در زیر نشان داده شده است:

event ها

حال می دانیم چگونه component های native را از طریق JavaScript کنترل کنیم، اما با event های حاصل از تعاملات کاربر، مثلا zoom یا panning چگونه کار کنیم؟ وقتی یک event native اتفاق می افتد، کد native باید آن را به نماینده ی JavaScriptی آن view بفرستد، هر دو view از طریق مقدار بازگشتی متد () getId با هم مرتبطند.


class MyCustomView extends View {
   ...
   public void onReceiveNativeEvent() {
      WritableMap event = Arguments.createMap();
      event.putString("message", "MyMessage");
      ReactContext reactContext = (ReactContext)getContext();
      reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
          getId(),
          "topChange",
          event);
    }
}

برای نگاشت event topChange به onChange callback در JavaScript، متد getExportedCustomBubblingEventTypeConstants را در ViewManager، override کنید:


public class ReactImageManager extends SimpleViewManager< mycustomview > {
    ...
    public Map getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.builder()
            .put(
                "topChange",
                MapBuilder.of(
                    "phasedRegistrationNames",
                    MapBuilder.of("bubbled", "onChange")))
                    .build();
    }
}

این callback از طریق event فراخوانی می شود. معمولا آن را درون یک component قرار می دهیم تا API ساده تری داشته باشیم:


							// MyCustomView.js
class MyCustomView extends React.Component {
  constructor(props) {
    super(props);
    this._onChange = this._onChange.bind(this);
  }
  _onChange(event: Event) {
    if (!this.props.onChangeMessage) {
      return;
    }
    this.props.onChangeMessage(event.nativeEvent.message);
  }
  render() {
    return < RCTMyCustomView {...this.props} onChange={this._onChange} />;
  }
}
MyCustomView.propTypes = {
  /**
   * Callback that is called continuously when the user is dragging the map.
   */
  onChangeMessage: PropTypes.func,
  ...
};
var RCTMyCustomView = requireNativeComponent(`RCTMyCustomView`);
							

  • 383
  •    0
  • تاریخ ارسال :   1398/06/10

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .