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. Laravel Model查询结果的3种存储格式内存占用对比

    PHP Laravel框架支持Model查询数据后可以有多种方式返回数据,对新手会造成一些困扰,比如数组Model对象.集合.纯数组 今天从内存占用的角度对比一下3种数据返回方式 按数组Model对象 ...

  2. MVC设计模式-笔记1

    MVC不仅仅是一个设计模式,它应该说是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种模式: 1.Observer观察者模式 2.Composite组合模式 3.Strategy策略模 ...

  3. Oracle学习(五)DBLINK

    一.DBLINK学习 目的:为了解决跨库访问的需求. 场景如下:tnsnames.ora(oracle的库配置文件)下配置了2个库的环境地址,现在要实现跨库访问. PS:DBLINK和是否同一个主机无 ...

  4. spring:spring再总结(ioc、aop、DI等)

    IOC(Inversion of Control),即"控制反转",不是一种技术而是一种思想 1.IOC的理解 Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内部 ...

  5. @lookup注解的使用

    背景,如果有一个类C,需要用到类B,如果使用@Autowired注解注入B,那么B每次调用都是同一个对象,即使B不是单例的,现在我希望每次调用B都是不一样的,那么实现方案有2个: 方案A : 每次从容 ...

  6. .NET 是信息技术应用创新产业重要参与者

    今天是国庆节,也是中秋节,月满中秋,举国欢庆,在这里祝各位开发者中秋国庆快乐. 放假在家就想把这几年对于.NET发展相关生态做个梳理,写一篇文章来总结一下这两年从腾讯出来自己创业,推动.NET在国内的 ...

  7. Java知识系统回顾整理01基础01第一个程序06Eclipse使用技巧

    一.批量修改 ALT+SHIFT+R 二.快速输入主方法 1. 敲入main 2. alt+/ 三.快速输入System.out.println 1. 敲入syso 2. alt+/ 四.快速输入fo ...

  8. 01 学习人工智能,不做笔记?做笔记不知道如何输入数学公式?“onenote+Mathematics Add-In”拯救你!onenote安装数学输入公式插件Microsoft Mathematics Add-In for Word and OneNote教程走一波

    一.Microsoft Mathematics Add-In 插件下载 Microsoft Mathematics Add-In for Word and OneNote插件下载链接: https:/ ...

  9. 【题解】【HAOI2011】Problem b

    \(Luogu2522\) 题目大意:求下面式子的值: \[\sum_{i=x}^n\sum_{j=y}^m[\gcd(i,j)=k] \] 这个东西直接求不好求,考虑差分,从\([1,n]\)的范围 ...

  10. 用集装箱装ASP。带有Docker和Azure Kubernetes服务的NET Core应用程序

    介绍 曾经有一个单一软件应用程序的时代,整个应用程序被打包并部署在作为单个进程运行的单个服务器上.我们都知道,在这个模型中,单点故障可能会导致整个应用程序崩溃. 微服务体系结构的发展是为了解决单片应用 ...