react native render native自定义视图
react native render native自定义视图
提问于 2016-01-16 00:33:22
我关注this doc，但我真的不知道如何在js端呈现我的客户视图。
我使用storyboard生成一个简单的视图，并将其分配给继承UIView的CustomView类。
然后我编写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);的意思
如何在requireNativeComponent方法中表示本机端CustimView？你能给我看一些代码吗，谢谢..
回答 1
Stack Overflow用户
发布于 2017-02-17 05:30:04
此行表示您只导出RCTMap，而不处理任何自定义属性
module.exports = requireNativeComponent('RCTMap', null);正如React Native Docs所说
import { requireNativeComponent } from 'react-native';
// requireNativeComponent automatically resolves this to "RCTMapManager"
module.exports = requireNativeComponent('RCTMap', null);因此requireNativeComponent会收到两个参数，第一个参数是您想要从之前的桥接过程中导入的组件的名称，第二个参数是将处理本机组件的类，这是为了操作自定义组件中的属性和一些逻辑，就像这样
// 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;希望这对关心它的人是有用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34815679
复制相关文章
相似问题
腾讯云开发者
