RN调用原生UI

创建LCFirstViewManager.h/.m文件，（关键点我回指出）

LCFirstViewManager.h中代码如下：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #b4261a; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; background-color: #ffffff; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; background-color: #ffffff }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ed462f; background-color: #ffffff }
span.s1 { color: #0433ff }
span.s2 { color: #ed462f }

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

#import <React/RCTViewManager.h> //引入头文件

@interface LCFirstViewManager : RCTViewManager //继承RCTViewManager（视图桥接管理类）

@end

LCFirstViewManager.m中的代码如下：

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #b4261a; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; background-color: #ffffff; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; background-color: #ffffff }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ed462f; background-color: #ffffff }
span.s1 { color: #0433ff }
span.s2 { color: #ed462f }
span.s3 { color: #b4261a }

#import "LCFirstViewManager.h"

@implementation LCFirstViewManager

RCT_EXPORT_MODULE(); //这句一定要写

- (UIView *)view

{

UILabel * label = [[UILabel alloc] init];

label.text = @"自定义文本";

return label;

}

@end

到此只为，xcode工程中的代码OK了。

然后js中%%%%%%%%%

创建一个文件夹，我命名为Label.js，首字母大写吧，没要求，强迫症吧，好辨别。

Label中代码：

var { requireNativeComponent } = require(‘react-native‘);

// requireNativeComponent 自动把这个组件提供给 "LCFirstViewManager"

module.exports = requireNativeComponent(‘LCFirstView‘, null); //这句代码就是导出你定义的Label组件

然后在需要用的位置导入Label.js文件，我是写在index.ios.js里面的，写的时候注意布局，不然很可能会什么也看不见
调用代码如下：

import Label from ‘./Label‘ //导入组件

使用的话和正常组件使用一样，如<Label/>