React Native 混編1 - 封裝原生的UI控件(基本控件)

如果對你的思路有丁點的幫助厉颤,麻煩幫忙點個??喲,謝謝Q N鞫!躺翻!

我們新建一個RN工程 本文以 MyBasicUIDemo 為例

文章目的:封裝一個原生的UI 控件丧叽,在RN 上使用,

案例實現(xiàn)功能:
1 原生的view上有一個Button公你,Label踊淳,點擊按鈕的時候讓Label顯示文字
2 RN 上有一個text組件,如果原生的Laebl有文字陕靠,那么顯示oc傳遞的值迂尝,

未命名.gif

具體實現(xiàn)步驟:

1、打開RN工程下的ios工程剪芥,新建一個繼承自UIView的類 MyBasicView

注意點: 需要導入 #import <RCTComponent.h>
寫上如下代碼:

在 .h 中添加我們需要的屬性及方法

@interface MyBasicView : UIView

  @property (nonatomic, strong) NSString *name;  // Label上將來顯示的文字

  @property (nonatomic, strong) RCTBubblingEventBlock onClickButton;  // 封裝代碼塊 - 回調(diào)(用來接收oc傳遞的參數(shù)垄开,并顯示在text組件上)

@end

在 .m 中實現(xiàn)具體的代碼

#import "MyBasicView.h"

@interface MyBasicView ()

    @property (nonatomic, weak) UILabel *myLabel;
    @property (nonatomic, weak) UIButton *myButton;

@end

@implementation MyBasicView

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
    
    UILabel *label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor orangeColor];
    _myLabel = label;
    [self addSubview:label];
    
    UIButton *button = [[UIButton alloc] init];
    [_myButton sizeToFit];
    _myButton = button;
    [button setTitle:@"點擊我顯示文字" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(showText) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:button];
  }
  return self;
}

- (void)layoutSubviews
{
  [super layoutSubviews];
  
  self.myLabel.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
  
  self.myButton.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5 + 20);
  
}

- (void)showText
{
  self.myLabel.text = self.name;
  [self.myLabel sizeToFit];
// 執(zhí)行 block封裝的代碼 并向RN傳遞參數(shù)(NSDictionary *)
  if (self.onClickButton) {
    self.onClickButton(@{@"key":@"我是原生傳遞給RN的文字 - 小小", @"boolKey":@(self.myLabel.text.length)});
  }
}

2、創(chuàng)建一個繼承自RCTViewManager的管理類 RCTMyBasicViewManager 來管理我們的原生控件 MyBasicView

2.1 在該類的 .m 文件夾下寫入宏
RCT_EXPORT_MODULE( )
2.2 實現(xiàn) - (UIView *)view ( )方法

#import "RCTMyViewManager.h"

#import "MyBasicView.h"

@implementation RCTMyViewManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(name, NSString)// 導出參數(shù)供RN 使用

RCT_EXPORT_VIEW_PROPERTY(onClickButton, RCTBubblingEventBlock)// 導出參數(shù)供RN 使用

- (UIView *)view
{
  return [[MyBasicView alloc] init];   // MyBasicView的尺寸位置以及樣式由RN來控制
}

@end

3粗俱、在RN 中將這個view 加載進來
3.1 新建一個 MyView的js文件(名字隨便)

import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
let RCTMyView = requireNativeComponent('RCTMyView', MyView);
// 注意  requireNativeComponent 參數(shù)1 為OC 文件中的 RCTMyViewManager 去掉Manager 说榆,參數(shù)2 為 js中的 MyView,
// 意思是:將 manager管理的view 映射到 我們創(chuàng)建的js組件中寸认,即:將原生view封裝在js組件中
export default class MyView extends Component {
    render() {
        return <RCTMyView {...this.props}/>
    }
}

3.2 在index.ios.js中導入我們自定義組件MyView并使用

import MyView from './MyView'
export default class MyBasicUIDemo extends Component {  render() {    
return (        
     <View  style={styles.container}>  
        <Text style={{marginTop:20,backgroundColor:'red'}}>    
            RN的text組件:{this.state.text}  
        </Text>  
      <MyView 
          style={styles.nativeViewStyle} 
          name='canshu' 
// onClickButton 封裝代碼 -  拿到OC傳遞過來的值签财,顯示在自己的text組件上
// 取值注意點:必須通過nativeEvent來獲取
          onClickButton={(e)=>{     
           if (e.nativeEvent.boolKey){         
               this.setState({              
                  text:e.nativeEvent.key          
              })      
          }else {         
             this.setState({             
                 text:'原生label的文字消失了'          
            })      
          } 
         }}/>
</View>    
); 
 }}

最后 - 運行項目即可

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市偏塞,隨后出現(xiàn)的幾起案子唱蒸,更是在濱河造成了極大的恐慌,老刑警劉巖灸叼,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件神汹,死亡現(xiàn)場離奇詭異,居然都是意外死亡古今,警方通過查閱死者的電腦和手機屁魏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捉腥,“玉大人氓拼,你說我怎么就攤上這事。” “怎么了桃漾?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵坏匪,是天一觀的道長。 經(jīng)常有香客問我撬统,道長适滓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任恋追,我火速辦了婚禮凭迹,結果婚禮上,老公的妹妹穿的比我還像新娘几于。我一直安慰自己蕊苗,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布沿彭。 她就那樣靜靜地躺著朽砰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喉刘。 梳的紋絲不亂的頭發(fā)上瞧柔,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音睦裳,去河邊找鬼造锅。 笑死,一個胖子當著我的面吹牛廉邑,可吹牛的內(nèi)容都是我干的哥蔚。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼蛛蒙,長吁一口氣:“原來是場噩夢啊……” “哼糙箍!你這毒婦竟也來了?” 一聲冷哼從身側響起牵祟,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤深夯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后诺苹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咕晋,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年收奔,在試婚紗的時候發(fā)現(xiàn)自己被綠了掌呜。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡坪哄,死狀恐怖站辉,靈堂內(nèi)的尸體忽然破棺而出呢撞,到底是詐尸還是另有隱情,我是刑警寧澤饰剥,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站摧阅,受9級特大地震影響汰蓉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜棒卷,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一顾孽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧比规,春花似錦若厚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至灾常,卻和暖如春霎冯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钞瀑。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工沈撞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人雕什。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓缠俺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親贷岸。 傳聞我的和親對象是個殘疾皇子壹士,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,344評論 25 707
  • 學習ReactNative有一段時間了,也加了好多群凰盔,看見群里每天那么多人在那兒討論和學習ReactNative墓卦,...
    光無影閱讀 7,484評論 28 41
  • 繼上一篇文章的React Native 與原生之間的通信(iOS),我們知道RN與原生通信主要通過屬性户敬、原生模塊落剪、...
    朱_源浩閱讀 19,209評論 43 60
  • 虞美人.杭州行 之一 西湖勝跡來翁媼, 信步不言老尿庐。 云天碧水泛龍船忠怖, 疑水面琉璃似舊當年。 觀魚自在空游樂抄瑟, 曲...
    金煊閱讀 308評論 3 8
  • 在這里我找到了世界的中心 那個有著檻門樓的小女孩 她在那里爬上爬下 風輕輕撫慰臉頰 眼慢慢越過遠山 心漸漸回歸寧靜...
    月漫香江閱讀 166評論 1 1