OGeek|极客世界-中国程序员成长平台

标题: ios - react 原生渲染原生自定义 View [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 13:37
标题: ios - react 原生渲染原生自定义 View

我关注 this doc但真的不明白如何在js端呈现我的客户 View 。

我使用 Storyboard生成一个简单的 View 并将其分配给我的 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);

如何在 requireNativeComponent 方法中表示原生端 CustimView？能给我看看代码吗，谢谢..

---

Best Answer-推荐答案

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

so requireNativeComponent 接收两个参数，第一个参数是您要从之前的桥接过程中导入的组件的名称，第二个参数是处理 native 组件的类，这是用于操作自定义组件中的属性和一些逻辑，就像那样

// 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

关于ios - react 原生渲染原生自定义 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34815679/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/)

Powered by Discuz! X3.4