封装原生UI

一、Preview

效果示意图.gif

二、封装原生进度UI

UI.png

1.首先封装原生的UI进度图，我这里是使用OC

2.在Xcode中新建UI管理类RNTProgressManager

在@implement中实现

RCT_EXPORT_MODULE()

Implement the -(UIView *)view method

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

这向Bridge中注册该类，以便JS调用

然后申明供JS调用的属性

/* The first thing we can do to make this component more usable is to bridge over some native properties */

/** * This handles the simple case, where JS and native property names match. */

RCT_EXPORT_VIEW_PROPERTY(progress, CGFloat)

//

RCT_EXPORT_VIEW_PROPERTY(ProgressString, NSString *)

/** * This macro can be used when you need to provide custom logic for setting * view properties. The macro should be followed by a method body, which can * refer to "json", "view" and "defaultView" to implement the required logic. */

RCT_CUSTOM_VIEW_PROPERTY(progressState, progressConvert, InvestmenProgress)

{

[view setProgressState:json ? [RCTConvert progressConvert:json] : defaultView.progressState];

}

3.在JS中新建progress.js

import { requireNativeComponent } from 'react-native';

import PropTypes from 'prop-types'

;import React from 'react';

class ProgressView extends React.Component {

render() { return ; } }

//类型检查，也方便在js中查看可用的属性

ProgressView.propTypes =

{ progress:PropTypes.number,

ProgressString:PropTypes.string,

progressState: PropTypes.shape({

name:PropTypes.string, }) }

// requireNativeComponent automatically resolves 'RNTProgress' to 'RNTProgressManager'

//导出类文件

module.exports = requireNativeComponent('RNTProgress', ProgressView);