這應該是最后一篇關于RN的文章,因為公司決定RN轉原生,至于為什么轉呢?可能是因為原生才是王道吧!
直入主題:在紅色的地方添加一個紅色的原生View,之后你可以在這個原生View上面寫任何原生控件。包括RN與原生的傳參和回調。
一、嵌套原生組件
1.在現有的RN項目中的ios目錄中創建一個繼承UIView的類
2.再創建一個繼承RCTViewManager通訊類
3.在通訊類RNTMLViewManager.m中引入三個頭文件
#import "RNTMLView.h"http://我們創建的原生View的類
#import <React/RCTBridge.h>//進行通信的頭文件
#import <React/RCTEventDispatcher.h>//事件派發，不導入會引起Xcode警告
4.在RNTMLViewManager.m寫入RN必要的標記宏
//標記宏（必要）
RCT_EXPORT_MODULE()
5.在RNTMLViewManager.m中創建我們剛剛新建的原生View
-? (RNTMLView *)view{
????RNTMLView *view = [[RNTMLView alloc] init];
????return view;
}
6.創建一個JS文件用來和View做交互
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;
8.在需要的地方使用我們的原生View(index.ios.js)引入MLView
import MLView from './MLView';//引入view
9.使用MLView
<MLView width={width} height={height - 44 - 64} backgroundColor={'red'}/>
10運行項目你就可以看到神奇的紅色的View出來了
到這里就可以完成一般的項目需求了,但是我們可能還需要暴露出一些回調方法和屬性,
ps:實際上這里我們使用了width,height,backgroundColor三個屬性,但是我們并沒有寫相關代碼就可以使用,我覺得應該是RN已經幫我們做了一些東西吧,
二、傳遞參數
11.關于相關的屬性的暴露
這里我們測試從RN向原生View傳入一個字典(iOS)/對象(js)
首先我們在RNTMLView.h中聲明一個字典
@property (nonatomic,strong) NSDictionary *dict;
12.在RNTMLView.m文件中添加set方法監聽一下
-(void)setDict:(NSDictionary *)dict{
????_dict = dict;
? ? NSLog(@"%@",dict);
}
13.在RNTMLViewManager.m通訊類中添加一個RN通信的宏
RCT_EXPORT_VIEW_PROPERTY(dict, NSDictionary)
13.在MLView.js中添加檢測屬性的代碼
//檢測屬性
static propTypes = {
????width: PropTypes.number,
????height: PropTypes.number,
????dict: PropTypes.object,
};
14.在使用MLView的地方(index.ios.js)使用dict進行傳參
<MLView width={width} height={height - 44 - 64} backgroundColor={'red'} dict={{'毛哥哥':'牛逼'}}/>
15.重新運行xcode,查看是否有打印(當然,肯定是有打印的)
三、點擊回調
16.以上就是所有的傳參操作,除了傳參還有就是輸出回調也是很有必要的,實際上跟傳參一樣的操作
17.模擬一個場景,點擊紅色的View返回一個字典
18.在RNTMLView.h中引入
#import <React/RCTComponent.h>
19.在RNTMLView.h中添加聲明
/**
點擊回調
*/
@property (nonatomic, copy) RCTDirectEventBlock onClickBanner;
20.在RNTMLView.m中添加touchesBegan(點擊事件)方法來模擬點擊回調
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
self.onClickBanner(@{@"牛逼":@"毛哥哥"});
}
21.在RNTMLViewManager.m中添加宏聲明
RCT_EXPORT_VIEW_PROPERTY(onClickBanner, RCTBubblingEventBlock)//返回聲明
22.在MLView.js文件中添加檢測屬性
onClickBanner: PropTypes.func,
23.在需要使用的地方使用
24.到這里差不多就可以完成99%項目的需求了,目前我們項目也只涉及到了這些,于是我也沒有打算更加深入的往下面研究了。以后我們APP項目全部轉原生，可能用到RN的時候應該很少了。但是現在還在開發和維護一個RN前端+node.js后臺的個人獨立項目，但是不會做過多的原生交互。
ps:期待我的下一篇文章《一個iOS 開發者的自我救贖》,希望能知道迷茫的APP開發者如何讓自己更完美，能真正的開發自己的APP(前端+后臺)
