這應(yīng)該是最后一篇關(guān)于RN的文章,因?yàn)楣緵Q定RN轉(zhuǎn)原生,至于為什么轉(zhuǎn)呢?可能是因?yàn)樵攀峭醯腊?

直入主題:在紅色的地方添加一個(gè)紅色的原生View,之后你可以在這個(gè)原生View上面寫任何原生控件。包括RN與原生的傳參和回調(diào)。

在紅色的地方添加一個(gè)紅色的原生View

一、嵌套原生組件

1.在現(xiàn)有的RN項(xiàng)目中的ios目錄中創(chuàng)建一個(gè)繼承UIView的類

我創(chuàng)建的兩個(gè)原生View的類

2.再創(chuàng)建一個(gè)繼承RCTViewManager通訊類

我創(chuàng)建的兩個(gè)通訊類

3.在通訊類RNTMLViewManager.m中引入三個(gè)頭文件

#import "RNTMLView.h"http://我們創(chuàng)建的原生View的類

#import <React/RCTBridge.h>//進(jìn)行通信的頭文件

#import <React/RCTEventDispatcher.h>//事件派發(fā)，不導(dǎo)入會(huì)引起Xcode警告

引入相關(guān)

4.在RNTMLViewManager.m寫入RN必要的標(biāo)記宏

//標(biāo)記宏（必要）

RCT_EXPORT_MODULE()

必要的標(biāo)記宏

5.在RNTMLViewManager.m中創(chuàng)建我們剛剛新建的原生View

-? (RNTMLView *)view{

????RNTMLView *view = [[RNTMLView alloc] init];

????return view;

}

創(chuàng)建我們剛剛新建的原生View

6.創(chuàng)建一個(gè)JS文件用來和View做交互

js交互文件

7.在MLView.js中寫入這些代碼

import React, { Component, PropTypes } from 'react';

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

var RNTMLView = requireNativeComponent('RNTMLView', RNTMLView);

export default class MLView extends Component {

????render() {

????????return <RNTMLView {...this.props}/>;

? ? }

}

module.exports = MLView;

js代碼

8.在需要的地方使用我們的原生View(index.ios.js)引入MLView

import MLView from './MLView';//引入view

引入MLView

9.使用MLView

<MLView width={width} height={height - 44 - 64} backgroundColor={'red'}/>

使用控件

10運(yùn)行項(xiàng)目你就可以看到神奇的紅色的View出來了

紅色的View出來了

到這里就可以完成一般的項(xiàng)目需求了,但是我們可能還需要暴露出一些回調(diào)方法和屬性,

ps:實(shí)際上這里我們使用了width,height,backgroundColor三個(gè)屬性,但是我們并沒有寫相關(guān)代碼就可以使用,我覺得應(yīng)該是RN已經(jīng)幫我們做了一些東西吧,

二、傳遞參數(shù)

11.關(guān)于相關(guān)的屬性的暴露

這里我們測(cè)試從RN向原生View傳入一個(gè)字典(iOS)/對(duì)象(js)

首先我們?cè)赗NTMLView.h中聲明一個(gè)字典

@property (nonatomic,strong) NSDictionary *dict;

聲明一個(gè)字典

12.在RNTMLView.m文件中添加set方法監(jiān)聽一下

-(void)setDict:(NSDictionary *)dict{

????_dict = dict;

? ? NSLog(@"%@",dict);

}

監(jiān)聽一下

13.在RNTMLViewManager.m通訊類中添加一個(gè)RN通信的宏

RCT_EXPORT_VIEW_PROPERTY(dict, NSDictionary)

字典聲明的宏

13.在MLView.js中添加檢測(cè)屬性的代碼

//檢測(cè)屬性

static propTypes = {

????width: PropTypes.number,

????height: PropTypes.number,

????dict: PropTypes.object,

};

添加檢測(cè)屬性的代碼

14.在使用MLView的地方(index.ios.js)使用dict進(jìn)行傳參

<MLView width={width} height={height - 44 - 64} backgroundColor={'red'} dict={{'毛哥哥':'牛逼'}}/>

使用dict

15.重新運(yùn)行xcode,查看是否有打印(當(dāng)然,肯定是有打印的)

打印來了

三、點(diǎn)擊回調(diào)

16.以上就是所有的傳參操作,除了傳參還有就是輸出回調(diào)也是很有必要的,實(shí)際上跟傳參一樣的操作

17.模擬一個(gè)場(chǎng)景,點(diǎn)擊紅色的View返回一個(gè)字典

18.在RNTMLView.h中引入

#import <React/RCTComponent.h>

19.在RNTMLView.h中添加聲明

/**

點(diǎn)擊回調(diào)

*/

@property (nonatomic, copy) RCTDirectEventBlock onClickBanner;

聲明和引入

20.在RNTMLView.m中添加touchesBegan(點(diǎn)擊事件)方法來模擬點(diǎn)擊回調(diào)

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

self.onClickBanner(@{@"牛逼":@"毛哥哥"});

}

添加點(diǎn)擊事件,模擬回調(diào)

21.在RNTMLViewManager.m中添加宏聲明

RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)//返回聲明

添加宏聲明

22.在MLView.js文件中添加檢測(cè)屬性

onClickBanner: PropTypes.func,

檢測(cè)屬性

23.在需要使用的地方使用

使用

24.到這里差不多就可以完成99%項(xiàng)目的需求了,目前我們項(xiàng)目也只涉及到了這些,于是我也沒有打算更加深入的往下面研究了。以后我們APP項(xiàng)目全部轉(zhuǎn)原生，可能用到RN的時(shí)候應(yīng)該很少了。但是現(xiàn)在還在開發(fā)和維護(hù)一個(gè)RN前端+node.js后臺(tái)的個(gè)人獨(dú)立項(xiàng)目，但是不會(huì)做過多的原生交互。

ps:期待我的下一篇文章《一個(gè)iOS 開發(fā)者的自我救贖》,希望能知道迷茫的APP開發(fā)者如何讓自己更完美，能真正的開發(fā)自己的APP(前端+后臺(tái))