RN调用原生UI
Posted 幺宝她爸屌丝逆袭
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RN调用原生UI相关的知识,希望对你有一定的参考价值。
创建LCFirstViewManager.h/.m文件,(关键点我回指出)
LCFirstViewManager.h中代码如下:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <React/RCTViewManager.h> //引入头文件
@interface LCFirstViewManager : RCTViewManager //继承RCTViewManager(视图桥接管理类)
@end
LCFirstViewManager.m中的代码如下:
#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/>
以上是关于RN调用原生UI的主要内容,如果未能解决你的问题,请参考以下文章