反應原生呈現本地自定義視圖

Question

我關注this doc，但真的不明白如何呈現我的客戶視圖在js端。

我使用故事板生成一個簡單的視圖，並將其分配給我的CustomView類繼承UIView。

然後我寫MyCustomViewManager.m像下面

#import "RCTViewManager.h" 
#import "CustomView.h" 

@interface MyCustomViewManager : RCTViewManager 
@end 

@implementation MyCustomViewManager 

RCT_EXPORT_MODULE() 

- (UIView *)view 
{ 
    return [[CustomView alloc] init]; 
} 

@end 

最後我下面寫的js端文件index.ios.js。

import React from 'react-native'; 

const {AppRegistry, View, requireNativeComponent,} = React; 

class Demo extends React.Component { 
    constructor(){ 
     super(); 
    } 

    var CustomView = requireNativeComponent('CustomView', null); 

    render() { 
     return (
     <View> 
      <CustomView></CustomView> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('Demo',() => Demo); 

也許我做錯了什麼，我不明白的官方文檔吝嗇下面的代碼 module.exports = requireNativeComponent('RCTMap', null);

我怎麼能代表本機端CustimView在requireNativeComponent方法？你能告訴我一些代碼，感謝..

Answer 1

此行意味着您導出RCTMap純粹沒有處理任何自定義屬性

module.exports = requireNativeComponent('RCTMap', null); 

爲陣營本地文件說，

import { requireNativeComponent } from 'react-native'; 

// requireNativeComponent automatically resolves this to "RCTMapManager" 
module.exports = requireNativeComponent('RCTMap', null); 

所以requireNativeComponent接收兩個參數，第一個參數是您想從橋接過程導入的組件的名稱，第二個參數是要處理本地組件的類，這是用於處理您的自定義com中的屬性和一些邏輯Ponent（波納恩特），像

// MapView.js 
import React from 'react'; 
import { requireNativeComponent } from 'react-native'; 

class MapView extends React.Component { 
    render() { 
    return <RCTMap {...this.props} />; 
    } 
} 

MapView.propTypes = { 
    /** 
    * When this property is set to `true` and a valid camera is associated 
    * with the map, the camera’s pitch angle is used to tilt the plane 
    * of the map. When this property is set to `false`, the camera’s pitch 
    * angle is ignored and the map is always displayed as if the user 
    * is looking straight down onto it. 
    */ 
    pitchEnabled: React.PropTypes.bool, 
}; 

var RCTMap = requireNativeComponent('RCTMap', MapView); 

module.exports = MapView; 

希望這是有用的人誰在乎它

請檢出React Native Docs