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()方法

@Overrideprotected 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 createViewManagers(ReactApplicationContext reactContext) {    return Arrays.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 (            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>        );    }

前言

步骤

更多相关文章

随机推荐