【React Native】RN使用原生Android控件（自定义组件）

前言

最近因为实习接触了React Native，有个要求是RN需要调用Android的原生控件来使用，结果百度一查发现许多都是很早之前的教程了（RN的更新速度比较快），就连RN的中文论坛也不是最新的，我这里就在此记录一下，使用的版本为0.62.2。

封装VideoView

我们以封装Android的VideoView为例子，根据官网教程（不推荐看中文版）需要5个步骤。

  • 1.创建一个ViewManager的子类。
  • 2.实现createViewInstance()方法。
  • 3.导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
  • 4.把这个视图管理类注册到应用程序包的createViewManagers里。
  • 5.实现 JavaScript模块。

首先在创建完RN项目，在Android工程下用Android Studio打开来进行开发，新建一个ReactVideoManager类来继承SimpleViewManager。

public class ReactVideoManager extends SimpleViewManager<MyPlay> {

    @NonNull
    @Override
    public String getName() {
        return "MyVideoView";
    }

    @NonNull
    @Override
    protected MyPlay createViewInstance(@NonNull ThemedReactContext reactContext) {
        return new MyPlay(reactContext);
    }
}

这里需要重写两个方法，getName()是返回这个自定义控件的名字来给RN调用，而createViewInstance()返回的是要封装的控件，这个继承类也需要一个填入一个泛型，就是你要封装的组件，这个MyPlay就是我自己封装的VideoView，可以拿TextView来进行尝试。

接下来就是要导出属性给RN进行调用了，比如说视频播放器的加载地址都是放在RN那里去进行自由的调用，而不是在Android原生里面写死，我们在ReactVideoManager类下面写上以下代码：

/**
 * 视频加载url
 *
 * @param videoView
 * @param url
 */
@ReactProp(name = "videoUrl")
public void setUrl(MyPlay videoView, String url) {
    videoView.setVideoPath(url);
    videoView.start();
}

这个必须返回值为空而且是public权限的，然后添加上ReactProp注解，这个注解里面的name代表着RN可以调用这个名字来进行放入一个String类型的值，注意第一个参数必须也是createViewInstance和泛型创建和相同的参数。然后接下来我们在创建一个ReactVideoPackage类继承ReactPackage来把这个ReactVideoManager注册进去。

public class ReactVideoPackage implements ReactPackage {


    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }


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

createNativeModules()是注册模块的，createViewManagers()是注册管理器的，如果想要注册多个模块就在List里面多个添加就行，没有要注册的要写成Collections.emptyList()。接下来就是在RN里面进行封装这个视频组件了，创建一个Video.js，代码如下：

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


var RCT_VIDEO_REF = 'MyVideoView';

class VideoView extends Component {

    constructor(props) {
        super(props);
    }

 
    render() {
        return <RCTVideoView
            {...this.props}
            ref={RCT_VIDEO_REF}
        />;
    };
}

VideoView.propTypes = {
    videoUrl: PropTypes.string,
    ...View.propTypes,
};

var RCTVideoView = requireNativeComponent('MyVideoView', VideoView);

module.exports = VideoView;

我们在VideoView.propTypes可以将属性videoUrl进行导出给外界调用，类型是string，当然也有其他对应的属性。

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

最后我们在需要调用的地方调用就完毕了。

import React, {Component} from 'react';
import {Text, View, TouchableOpacity, StyleSheet, Image} from 'react-native';

import MyVideView from './Video';


export default class HelloWorldApp extends Component {


  
    render() {

        return (

            <View style={styles.container}>

                <MyVideView
                    ref={(video) => {
                        this.video = video;
                    }}
                    videoUrl={'https://wyhouse.oss-cn-beijing.aliyuncs.com/test/V00604-153602.mp4'}
                    style={{height: 200, width: 380, background: 'transparent'}}/>

                <View style={{height: 90, flexDirection: 'row', justifyContent: 'flex-start'}}>
                    <TouchableOpacity style={{marginLeft: 10}} onPress={this.onPressPauseOrStart.bind(this)}>
                        <Text>测试按钮</Text>
                    </TouchableOpacity>
               
                </View>

            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-between',
    },
});


Android向RN发送事件

封装完成了，通过以上方法，就可以导出各种设置属性来给RN使用，但是我要获取到一些事件该怎么办呢，比如视频长度，进度条之类的东西该怎么办呢。我们可以通过RN的一系列方法来实现，首相让VideoView实现MediaPlayer.OnPreparedListener监听,然后输入以下代码：

@Override
public void onPrepared(MediaPlayer mp) {
    int duration = mp.getDuration();

    //向js发送事件
    WritableMap event = Arguments.createMap();
    event.putInt("duration", duration);
    ReactContext reactContext = (ReactContext) getContext();
    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
            getId(), //绑定id
            "topChange", //注意这里是发给RN的事件名称，对应RN上面的onchange事件
            event   //要传的值，类似Bundle
    );

}

然后在Video.js添加onchange事件

_onChange(event) {
    if (!this.props.onPrepared) {
        return;
    }

    this.props.onPrepared(event.nativeEvent.duration);//这里获取到传过来的值，就是对应的key

}


render() {
    return <RCTVideoView
        {...this.props}
        ref={RCT_VIDEO_REF}
        onChange={this._onChange.bind(this)}
       />;
   };

    
VideoView.propTypes = {
    videoUrl: PropTypes.string,
    onPrepared: PropTypes.func,
    ...View.propTypes,
};

var RCTVideoView = requireNativeComponent('MyVideoView', VideoView, {
    nativeOnly: {onChange: true},
});//onChange属性不想暴露给外面的话，就是通过nativeOnly来设置

module.exports = VideoView;

最后进行调用：

//视频时长
_onPrepared(duration) {
    console.log('视频时长 JS duration =' + duration);
}

<MyVideView
    ref={(video) => {
        this.video = video;
    }}
    videoUrl={'https://wyhouse.oss-cn-beijing.aliyuncs.com/test/V00604-153602.mp4'}
    onPrepared={this._onPrepared}
    style={{height: 200, width: 380, background: 'transparent'}}/>

接着你就可以在Android studio Logcat中看到RN输出的信息了。


获取到视频长度

但是如果还有其他的事件怎么办，不可能都只能用onchange事件吧，这里我们就可以自定义事件，只需要重写ReactVideoManager下的getExportedCustomBubblingEventTypeConstants()方法就好，比如说实时获取进度条。

/**
 * 新的自定义事件
 *
 * @return
 */
@Nullable
@Override
public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
    return MapBuilder.<String, Object>builder().put(
            "onProgress", MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "onProgress"))).build();
}

phasedRegistrationNames是规定的字段不能改，这是按照最新文档写出来的，网上找的都是老版而且不生效（都是踩出来的坑啊）接下来也是一样的，比如我通过Handler和Runnable来配合获取实时进度条：

@Override
public void run() {
    int progress = videoView.getCurrentPosition();
    WritableMap event = Arguments.createMap();
    event.putInt("progress", progress);
    dispatchEvent("onProgress", event);


    if (videoView.isPlaying()) {
        videoSeekBar.setProgress(videoView.getCurrentPosition());
    }

    mHandler.postDelayed(this, 1000);
}


/**
 * 传递RN层事件
 *
 * @param eventName
 * @param eventMap
 */
public void dispatchEvent(String eventName, WritableMap eventMap) {
    ReactContext reactContext = (ReactContext) getContext();
    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
            getId(),
            eventName,
            eventMap
    );
}

//然后在RN层写入事件
_onProgress(event) {
    if (!this.props.onProgress) {
        return;
    }

    this.props.onProgress(event.nativeEvent.progress);
}


render() {
    return <RCTVideoView
        {...this.props}
        ref={RCT_VIDEO_REF}
        onChange={this._onChange.bind(this)}
        onProgress={this._onProgress.bind(this)}
    />;
};

VideoView.propTypes = {
    videoUrl: PropTypes.string,
    onPrepared: PropTypes.func,
    onProgress: PropTypes.func,
    ...View.propTypes,
};

//最后调用这个方法就完事了
onProgress={this._onProgress}

//时长进度更新
_onProgress(progress) {
    console.log('JS time = ' + progress);
}

获取到进度条


参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,569评论 4赞 363
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,499评论 1赞 294
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,271评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,087评论 0赞 209
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,474评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,670评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,911评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,636评论 0赞 202
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,397评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1赞 261
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,418评论 2赞 254
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,074评论 3赞 237
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0赞 196
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2赞 270