react-native调用Android原生控件

前言

本博客要说的是react-native（以下简称RN）中，怎样去调用Android的原生控件。其实这个官方文档也有说明，但就是没有给出一个完整的例子出来，最近在整理RN的知识点，就想着总结一下这个知识。

步骤

1. 创建ViewManager的子类

public class ReactImageViewManager extends SimpleViewManager<ImageView> {

    public static final String REACT_CLASS = "FastImageView";

    @Override
    public String getName() {
        // 返回js端识别的类名
        return REACT_CLASS;
    }
}

2. 实现createViewInstance()方法

@Override
protected ImageView createViewInstance(ThemedReactContext reactContext) {
    // 实例化原生控件
    return new ImageView(reactContext);
}

3. 通过ReactProp或者ReactPropGroup注解来导出属性的设置方法

• ReactProp属性必须包含一个name属性，还有默认值属性，不强制要求设置；
• 具体参考RN中文文档

// js端设置属性的方法
    @ReactProp(name = "src")
    public void setSrc(ImageView iv, ReadableMap source) {
    // TODO 解析js端传过来的source
//        iv.setImageResource(R.mipmap.ic_launcher);
        Glide.with(iv.getContext().getApplicationContext())
                .load("http://c.hiphotos.baidu.com/image/pic/item/7acb0a46f21fbe09810db97167600c338744ad00.jpg")
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .into(iv);
    }

4. 注册ViewManager

• 原生端最后一步是把我们写好的ViewManager注册到ReactPackage中

 @Override
 public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(
        new ReactImageViewManager()
    );
}

5. js端封装原生控件

• 为了方便调用，会将原生的控件封装成react端单独的一个控件

"use strict";

import React from 'react';
import PropTypes from 'prop-types'
import {
    requireNativeComponent,
    View,
} from 'react-native';

class NewFastImage extends React.Component {

    render() {
        return (
            <FastIV
                {...this.props}
                src={this.props.source}
            />
        )
    }
}

NewFastImage.priority = {
    low: 'low',
    normal: 'normal',
    high: 'high',
}

const FastImageSourcePropType = PropTypes.shape({
    uri: PropTypes.string,
    headers: PropTypes.objectOf(PropTypes.string),
    priority: PropTypes.oneOf(Object.keys(NewFastImage.priority)),
})

NewFastImage.propTypes = {
    ...View.propTypes,
    // 该属性对应原生的setSrc方法，必须要有
    src: PropTypes.oneOfType([FastImageSourcePropType, PropTypes.number]),
};

// FastImageView是我们在原生控件暴露给js端的名字，必须一样
const FastIV = requireNativeComponent('FastImageView', NewFastImage);

export default NewFastImage;

6. 控件调用

• 到了这一步，基本就完成了。但有一点要说一下，控件是没有默认大小的，必须要在样式中设置大小才能显示。

render() {
        return (
            <View style={{flex: 1}}>
                <NewFastImage source={{uri: '网络图片url'}} style={{width: 100, height: 50, borderRadius: 20}}/>
            </View>
        );
    }