舉例：在RN中，使用image加載網(wǎng)絡(luò)圖片，但是RN的image是沒有緩存效果的；原生中，使用的是SDWebImage進(jìn)行圖片的緩存處理。如何讓 RN中也有圖片緩存效果呢~
直接讓RN加載原生組件就可以啦

一：一個簡單的JS 加載原生組件

先簡單的熟悉下JS是怎么實(shí)現(xiàn)加載原生組件的

1. 首先我們需要`requireNativeComponent`這個東東幫助我們在JS中獲取原生組件

import {
    requireNativeComponent
} from 'react-native';
var NativeView = requireNativeComponent('NativeViewClass');

2. 這是 `NativeView` 就是獲取到的原生組件；`NativeViewClass`就是原生組件的類名。我們可以直接使用`NativeView`進(jìn)行布局~

<NativeView style={{width: 100, height:100}} />

3. 看下原生`NativeViewClass`是怎么實(shí)現(xiàn)的

NativeView.h

#import <React/RCTViewManager.h>

@interface NativeView : RCTViewManager

@end

NativeView.m

#import "NativeView.h"

@implementation NativeView

RCT_EXPORT_MODULE() // 默認(rèn)導(dǎo)出 NativeView


// 需要實(shí)現(xiàn)該方法，目的是返回組件，在RN中獲取到的組件就是view
- (UIView *)view
{
  UILabel *view = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
  view.backgroundColor = [UIColor redColor];
  return view;
}
@end

4. OK~一個簡單的JS 加載原生組件就搞定啦~，看下效果~

image.png

5. 現(xiàn)在我想在label上顯示一個文字，該怎么顯示呢~ 這時候就需要

RCT_EXPORT_VIEW_PROPERTY 出馬啦，專門導(dǎo)出屬性使用滴~

#import "NativeView.h"

@implementation NativeView

RCT_EXPORT_MODULE()

- (UIView *)view
{
  UILabel *view = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
  view.backgroundColor = [UIColor redColor];
  return view;
}

RCT_EXPORT_VIEW_PROPERTY(text, NSString)
@end

RN中使用~

<NativeView style={{width: 100, height:100, marginTop: 100}}
            text={'哈哈'}
/>

效果~

image.png

6. 假如我在導(dǎo)出一個屬性 `placeholder`~

RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)

<NativeView style={{width: 100, height:100, marginTop: 100}}
                            text={'哈哈'}
                            placeholder={'啦啦啦'}
                />

image.png

7. 通過對比這個錯誤和設(shè)置text，可以這樣的猜測~

在RN中使用的NativeView 就是原生的UILabel對象
NativeView設(shè)置屬性就是給UILabel對象的屬性并實(shí)現(xiàn)set方法
UILabel 有text屬性，可以實(shí)現(xiàn)set方法，但是沒有placeholder 屬性所以不能實(shí)現(xiàn)set方法，所以報錯