react native render native custom view - ios

Question

I follow this doc but really don't understand that how to render my customer view in js side.
I use storyboard generate a simple View and allocate it to my CustomView class which inherit UIView.
then I write MyCustomViewManager.m like below
#import "RCTViewManager.h"
#import "CustomView.h"
#interface MyCustomViewManager : RCTViewManager
#end
#implementation MyCustomViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[CustomView alloc] init];
}
#end
finally I write js side file index.ios.js below.
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);
maybe I did something wrong, I don't understand official doc mean about below code
module.exports = requireNativeComponent('RCTMap', null);
how could I represent native side CustimView in requireNativeComponent method? could you show me some code, thanks ..

Answer 1

This line means that you export RCTMap purely without processing any custom property
module.exports = requireNativeComponent('RCTMap', null);
as React Native Docs says,
import { requireNativeComponent } from 'react-native';
// requireNativeComponent automatically resolves this to "RCTMapManager"
module.exports = requireNativeComponent('RCTMap', null);
so requireNativeComponent receives two parameters, the first one takes the name of the component that you want to import from the bridging process before and the second takes the class that will process the native component, this is for manipulate properties and some logic inside your custom component, like that
// 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;
Hope this is usefull for anyone who cares about it
please checkout the React Native Docs