封装原生UI
一、Preview
二、封装原生进度UI
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);
使用
三、git源码地址
四、系列文章
ReactNative使用Navigation构建完整应用（一）
ReactNative使用Navigation构建完整应用（二）
