React Native之创建iOS视图

最新推荐文章于 2024-04-07 15:02:03 发布

chris-gardner

最新推荐文章于 2024-04-07 15:02:03 发布

阅读量4.1k

点赞数 2

分类专栏： React Native 文章标签： native xcode ios

本文链接：https://blog.youkuaiyun.com/u014410695/article/details/51133727

版权

本文介绍了如何在React Native中封装和使用自定义的iOS原生视图，包括创建原生视图、管理器、JavaScript端的组件，并通过RCT_EXPORT_VIEW_PROPERTY宏将原生属性暴露给JavaScript，实现对原生组件属性的控制。示例中展示了如何禁用ScrollView的滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native封装了一些常用的原生组件譬如ScrollView和TextInput，有的时候我还需要使用其他的原生组件譬如一些第三方组件或自己写的组件，而这些组件React Native是没有替我们封装好的，但是React Native提供了一套封装和植入原生组件的方案，这个方案非常简单。
步骤如下：

1.选择一个已有的原生视图，这里我在xcode里新建一个视图MyCustomView,在MyCustomView上加入一个label来标记这是自己创建的视图代码如下：
MyCustomView.h

#import <UIKit/UIKit.h>

@interface MyCustomView : UIScrollView

@end

MyCustomView.m

#import "MyCustomView.h"

@implementation MyCustomView
-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self!=nil) {
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
        label.text = @"你好中国";
        [self addSubview:label];
        label.textColor = [UIColor blueColor];
    }
    return self;
}