反应原生渲染本机自定义视图

Question

我关注this doc，但实际上并不了解如何在js方面呈现我的客户视图。

我使用storyboard生成一个简单的View并将其分配给继承CustomView的{​​{1}}类。

然后我写下UIView，如下所示

MyCustomViewManager.m

最后我在下面写了js副文件#import "RCTViewManager.h" #import "CustomView.h" @interface MyCustomViewManager : RCTViewManager @end @implementation MyCustomViewManager RCT_EXPORT_MODULE() - (UIView *)view { return [[CustomView alloc] init]; } @end 。

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);

我怎么能在requireNativeComponent方法中表示原生端module.exports = requireNativeComponent('RCTMap', null);？你能告诉我一些代码吗，谢谢..

Answer 1

此行表示您纯粹导出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;

希望这对任何关心它的人都有用

请查看React Native Docs