react-native中textInput在androidTV上的焦点处理(坑篇)
react-native中,开发androidTV输入框的焦点处理。
复述流程: 安卓TV上,无法通过上下左右键,以及遥控器的上下左右来获取输入框焦点。
原因: 脸书的锅,但没修,这里官方的说法,TextInput在Android TV设备上不起作用。本机ReactEditText实现存在一个问题,使它无法获得关注。这样就无法导航到TextInput。
解决方法:使用touchable来转发焦点。
如:
1 import { TextInput, TouchableHighlight } from 'react-native'
2
3
4 // render函数中
5 // JSX语法
6 render() {
7 return (
8 <TouchableHighlight
9 onFocus={() => {
10 this.textInputRef.focus();
11 }}>
12 <TextInput
13 ref={(ref) => {
14 this.textInputRef = ref;
15 }}/>
16 </TouchableHighlight>
17 )
18 }
为什么要这样做?
使用react-native开发安卓手机的人可能没有注意过这个点,毕竟可以使用点击来获取焦点,但是在一些机器上,比如键盘机,以及TV这种情况下,是无法根据点击来获取焦点的。
这个问题起源于我在github上的一个提问。主要发现很少人提及这个问题,以及搜索没这方面的说明, 也就写这个问题。
issue地址:https://github.com/reactnativecn/react-native-website/issues/225
react-native中textInput在androidTV上的焦点处理(坑篇)的更多相关文章
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示
React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的 ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- Redis中的事务(多命令)操作
作为一个nosql数据库,事务是必要功能.但是redis我们是可以理解为它不支持事务操作的,因为它的特征完全不满足我们对事物的正常理解 ps:我不知道是谁一开始提出redis支持事务的,但是我更倾向于 ...
- 对之前IoT项目的完善
博文有点长,因为是两个大项目(四个小项目)放一起了,不过都很适合新手小白(有源程序的情况),也可以再接 OLED 屏,就是前几篇博客的操作 一.esp8266 读取 DHT11 数据并通过微信小程序发 ...
- log4net 纯代码配置
当需要输出的日志很多的时候,每次修改config都很麻烦,于是想可不可以动态生成. 网上找的案例都是获取单个appender/logger的,此处例子是任意logger,appender相同 log4 ...
- java调用Oracle中的存储过程与存储函数
1 //调用存储过程 2 public static void testPro(){ 3 String driver = "oracle.jdbc.OracleDriver"; 4 ...
- LightningChart运行互动示例介绍
LightningChart.NET完全由GPU加速,并且性能经过优化,可用于实时显示海量数据-超过10亿个数据点. LightningChart包括广泛的2D,高级3D,Polar,Smith,3D ...
- java的string方法使用
1.将list转换为","隔开的字符串 //videoIdList值转换成 1,2,3 String videoIds = StringUtils.join(videoIdList ...
- linux查看进程内存使用情况,以及将线程情况输出文件
用jmap把进程内存使用情况dump到文件中,再用jhat分析查看.jmap进行dump命令格式如下: jmap -dump:format=b,file=/tmp/dump.dat 21711 -- ...
- 安装redis,phpstudy
第一步: 先下载一下我分享自己的百度网盘里面的资料,网友们下载即可 链接:https://pan.baidu.com/s/1SVO-yAEqbFuvhiiI6Dm3VQ 提取码:u8t0 复制这段内容 ...
- css实现中间横线俩边文字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决VMware无法共享ubuntu虚拟机文件
1.错误信息:无法更新运行时文件夹共享状态:在客户机操作系统内装载共享文件夹文件系统时出错 2.检查vmware tool是否正确安装 lsmod | grep vmhgfs modprobe vmh ...