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. PPT画成这样,述职答辩还能过吗?

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 标题有点凶,但内容很干! 大部分程序员并不会画PPT,也梳理不出架构图.工作的年头虽 ...

  2. 详解如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下利用 socket.io 实现消息实时推送 框架准备 1.确保你本地已经安装好了nodejs和np ...

  3. 微信小程序-实现文字跑马灯-wepy

    百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注 ...

  4. GTA5整合版

    GTA5mod整合版游戏介绍 GTA5mod整合版游戏是一款完美破解的游戏,玩家能够在游戏中享受最爽快的角色动作扮演玩法,在这里你将是一名强大的黑帮分子,在这个都市中,你将体验最真实的黑帮社会玩法.G ...

  5. Python练习题 032:Project Euler 004:最大的回文积

    本题来自 Project Euler 第4题:https://projecteuler.net/problem=4 # Project Euler: Problem 4: Largest palind ...

  6. 指针数组学习中的小插曲真是醉了-----Strcmp用法

    参考: 1.C++ 从入门到精通第三版: 2.https://blog.csdn.net/liaoshengshi/article/details/45099923      如是多次被别人转载的地址 ...

  7. 【题解】[CEOI2004]锯木厂选址

    Link \(\text{Solution:}\) 注意到题目中的编号是倒着的,于是我们的距离要预处理的是后缀和. 考虑如何\(n^2\)搞: 设\(dp[i]\)表示选择\(i\)为第二个中转点的最 ...

  8. 深入研究RocketMQ消费者是如何获取消息的

    前言 小伙伴们,国庆都过的开心吗?国庆后的第一个工作日是不是很多小伙伴还沉浸在假期的心情中,没有工作状态呢? 那王子今天和大家聊一聊RocketMQ的消费者是如何获取消息的,通过学习知识来找回状态吧. ...

  9. java安全编码指南之:lock和同步的正确使用

    目录 简介 使用private final object来作为lock对象 不要synchronize可被重用的对象 不要sync Object.getClass() 不要sync高级并发对象 不要使 ...

  10. iPhone手机越狱-逆向砸壳-代码注入

    iPhone手机越狱 逆向砸壳 代码注入 工具下载 操作越狱 安装待逆向应用(app) 使用OpenSSH连接手机 找到应用二进制文件地址 找到应用document沙盒地址 拷贝砸壳工具(dumpde ...