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上的焦点处理(坑篇)的更多相关文章

  1. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

  2. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  3. [RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示

    React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致 子内容 在安卓上无法显示 问题: 0.9.0 或 0.8.0 版本的 ...

  4. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  5. React Native 之 TextInput使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  7. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  8. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. synchronized和lock的作用与对比

    一.synchronized的作用 synchronized是java中的一个关键字,用于线程同步.1. 修饰一个代码块,被修饰的代码块称为同步语句块,其作用的范围是大括号{}括起来的代码,作用的对象 ...

  2. dubbo学习(三)配置dubbo API方式配置

    provider(生产者) import com.alibaba.dubbo.config.ApplicationConfig; import com.alibaba.dubbo.config.Pro ...

  3. Python3.8下载安装步骤及环境变量配置详解

    安装地址:https://www.python.org/ 打开python官网网址,点击 Python 3.8.5 3.下载与自己电脑系统相匹配的版本(这里以64为例) 点击下载完成后打开文件运行 点 ...

  4. Salesforce LWC学习(二十六) 简单知识总结篇三

    首先本篇感谢长源edward老哥的大力帮助. 背景:我们在前端开发的时候,经常会用到输入框,并且对这个输入框设置 required或者其他的验证,当不满足条件时使用自定义的UI或者使用标准的 inpu ...

  5. HTTP协议学习之Request学习

    在开始前,我们首先对HTTP协议做个简单的了解 HTTP协议(Hyper Text Transfer Protocol) 超文本传输协议 名词非常的高大上,如果学过计算机网络这门课(再如果还有一点印象 ...

  6. nginx 1.12安装

    准备工作 使用root用户安装. 到nginx官网下载Linux源码或者执行:wget http://nginx.org/download/nginx-1.12.2.tar.gz. 到pcre站点下载 ...

  7. Python-为元组中每个元素命名

    学生信息系统: (名字,年龄,性别,邮箱地址) 为了减少存储开支,每个学生的信息都以一个元组形式存放 如: ('tom', 18,'male','tom@qq.com' ) ('jom', 18,'m ...

  8. go分库分表 主从分离例子

    网上有很多介绍分库分表的文章,方法很多: 分区表切分 垂直切分 水平切分 区间切分 取模切分 这里不细说 分库分表简单,但后期会带来一系列的难题: 事务 Join 分页 数据库: master和sla ...

  9. 神奇的字符串匹配:扩展KMP算法

    引言 一个算是冷门的算法(在竞赛上),不过其算法思想值得深究. 前置知识 kmp的算法思想,具体可以参考 → Click here trie树(字典树). 正文 问题定义:给定两个字符串 S 和 T( ...

  10. CentOS7设置内网时间同步

    1.yum 安装 NTP服务器 [root@master ~]# yum -y install ntp 2.启动ntpd服务 [root@master ~]# systemctl start ntpd ...