码迷,mamicode.com
首页 > 其他好文 > 详细

RN调用原生UI

时间:2017-09-27 15:21:56      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:height   使用   color   convert   ica   定义   接管   class   关键点   

创建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

标签:height   使用   color   convert   ica   定义   接管   class   关键点   

原文地址:http://www.cnblogs.com/lc901221/p/7601839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!