React native using IOS native UI components

Currently react native components are not many, and some are not how to use, this time you need to encapsulate the native UI components

Previously, there were two types of communication between RN and native:

1>>> react native internal events need to notify native call native method (or pass data in Rn to native), this time can be used to create a new manager such as a file Rct_export_moudle ( Exposed native class, Rct_export_method () exposed native method to JS call, in JS through nativemoudles.xxx get the native file and then call method (pass JS parameters to native ) can complete the communication

2 >>>native occurrence of events need to be notified to JS when a send notification Self.bridge sendxxx This method seems to be not commonly used to warn, of course, can also use the kind of the above with JS active call native, in the native method to add a A block callback to pass the data back to JS in the block callback. Or is the following method, the method of exporting the native component to JS

Start encapsulating native iOS components below

Here I encapsulated is an album Browse view, PhotoView inherit from UIView, according to normal custom View to be able.

And then there's three different.

1>>> declares a Rctbubblingeventblock attribute, what is this ghost? Is the method you want to export, named to start with, such as Ontap,onclick self-play

2>>> If you need to pass a value to your UI component in JS, assign a value attribute, expose a need to pass a worthy attribute: such as @property (Nonatomic,strong) nsstring * * *

3>>> If you need to export the method, declare a protocol, proxy method, let your agent go to execute, why use proxy, later, see figure: Custom UI Components

The note is clear, there is no need to explain, if necessary, private chat ha

And then there's this UI component everywhere.

1> Create a new manager, of course, you can call anything you like, usually named after manager, inherit from Rctviewmanger

2> abide by your custom view of the protocol as his agent implements his proxy method

3> Rewrite-(UIView *) View method, do not assign any property in this method, do not do anything, alloc init set proxy for self OK

4>rct_export_moudle () Export module Rct_export_view_property (url,nsstring) Export Properties Rct_export_view_property (ONSINGLETAP, Rctbubblingeventblock) Export method Note that it is important to write the property name and method name consistent with your custom view.

5> if it is a simple export attribute, you do not need a proxy or something. The method of the proxy method is implemented in the proxy method through the holding custom view of the custom view of the block, the export method, you can take a parameter of the obj type, see the figure below

Tips: There is a comparison pit, that is, JS debugging your native UI events do not use Console.warn (), will not print a warning, but it may also be related to my view, I added there is animation, may create conflict

React native using IOS native UI components