react native 适配机顶盒、智能电视遥控器解决焦点问题

上一篇文章详细讲解了我自己搭建react native 的开发环境，现在就给大家介绍下如何自定义自己的原声view 、实现自己的适配，这里主要是机顶盒遥控器的适配，react native 本身不支持遥控器焦点，我们自己实现支持焦点：

第一步、定义java的包管理

/**
* Created by thinkpad on 2017/2/22.
*/
public class AnExampleReactPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return null;
}

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return null;
}

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

第二步、定义java的view

public class CircleView extends TextView {

public CircleView(final Context context) {
super(context);
this.setText("asdfdsafd");
this.setFocusable(true);
this.setClickable(true);
this.setOnClickListener(
new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"hello",Toast.LENGTH_SHORT).show();
}
});
this.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
v.setBackgroundColor(Color.RED);
}
});
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
v.setBackgroundColor(Color.WHITE);
}
});
}
}

第三步、jsx映射java组件

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

const MCircle = requireNativeComponent('MCircle', {
propTypes: {
...View.propTypes // 包含默认的View的属性
},
});

export default MCircle;

到处这个组件，在别的页面直接引用就可以实现自定义的这个view

react native 适配机顶盒、智能电视遥控器解决焦点问题相关推荐

小米4 第三方re奇兔_【沙发管家】带你了解小米电视的几个使用技巧！|小米电视|沙发管家|机顶盒|智能电视|遥控器...
小米电视,作为一款智能产品,小米电视自带的MIUI TV系统也一直在不断更新优化,根据大多数用户的意愿增添了很多更人性化.更方便的功能.不过可能很多新入手的用户还不是十分了解,今天小编就在这里给大家简 ...
React Native中TouchableHighlight和TouchableOpacity无法获取焦点问题的解决
一.背景最近公司做了一个在线教育的TV端的视频播放app,类似于酷猫那种,采用React Native作为主框架,头部的导航菜单用TouchableHighlight标签制作,如下图: 二.发现问题 ...
React Native 的 ListView 性能问题已解决
长列表或者无限下拉列表是最常见的应用场景之一.RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧.而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要 ...
React Native适配安卓IOS刘海屏、异形屏方案
首先顶部引入这几个模块 import {Platform,SafeAreaView,NativeModules,StatusBar } from "react-native"; c ...
react native配置环境watchman监控安装失败解决办法
1,安装出错提示在安装watchman之前先运行 brew link pcre; 2, 还是提升错误不能连接: 3,试试运行,还说不行: 4,给路径授予权限,输入权限密码,这个是重点:sudo cho ...
React Native入门基础使用总结
1.router: react-native-router-flux 基于react-navigation/native 二次封装 2.字体图标:react-native-vector-icons(推 ...
React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
react native在growth stack中的角色思考
Growth Hacker在国内外的互联网界近几年都是比较火热的词,互联网巨头Facebook也许是践行Growth Hacker最好的公司.然而概念吵的火并不等于做的好,如何落地Growth Hac ...
智能电视应用适配指南
在智能电视应用的设计过程中,针对不同的屏幕大小,不同的操控方式,不同的地区和不同的语种,甚至考虑不同的运营商,应该如何来设计?我们将在下面的内容中来探讨这些内容. 界面适配这方面主要针对界面和字体. ...

react native 适配机顶盒、智能电视遥控器解决焦点问题

react native 适配机顶盒、智能电视遥控器解决焦点问题相关推荐

最新文章

热门文章

react native 适配机顶盒、智能电视 遥控器解决焦点问题

react native 适配机顶盒、智能电视 遥控器解决焦点问题相关推荐

最新文章

热门文章

react native 适配机顶盒、智能电视遥控器解决焦点问题

react native 适配机顶盒、智能电视遥控器解决焦点问题相关推荐