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. 【答疑解惑】为什么你的 Charles 会抓包失败?

    作为一名 Web 开发工程师,天天都会和网络打交道.Charles 作为一款网络抓包工具,几乎成了 Web 开发的标配. 本文是我深度使用 Charles 后总结而成,不同于其它介绍 Charles ...

  2. 永远不要在代码中使用“User”这个单词

    ​ 当你意识到你在项目开始时做的轻量.简单的设想竟然完全错了时,你已经用了六个月的时间投入到这个项目上.现在你需要解决这些问题,才能让这个系统继续运行下去,你发现你用在这个项目上的精力远远超出了你的预 ...

  3. Xmind 2020 破解教程

    前言: 今天用xmind试用版记了会笔记,发现哎哟还真好用,于是乎我脑子一热,点击激活,发现年费好尼玛贵,瞬间我就冷静下来了. 于是乎,脑海里立马浮现出两个字:破解!好了废话不多说,直接上傻瓜教程.( ...

  4. 刷题[BJDCTF2020]Mark loves cat

    解题思路 打开网页,发现是一个博客,基本寻找博客挂载信息,源码等无果后,扫描后台.发现.git泄露 .git泄露 发现.git泄露后,使用Git Extract这款工具,可自动将源码clone到本地 ...

  5. TIMESTAMP with implicit DEFAULT value is deprecated

    出错版本 mysql 5.7 why? (警告)不包含隐式默认值的时间戳 way? 在 /etc/my.conf中 mysqld 模块中添加 explicit_defaults_for_timesta ...

  6. “酒香也怕巷子深” Smartflow-Sharp 工作流

    导语 老话说得好,"酒香不怕巷子深"可是我又不是什么大咖,写得再好也没人知道.所以我今天准备再写写我的工作流组件,写得不好还请大家见谅.写文章对于我来说,有点感觉"茶壶里 ...

  7. 03 ArcPython实战篇一

    1.自增计算 (字段计算器) total = 0 def accumulate(increment):        global total        if total:            ...

  8. python排序算法总结和实现

    ------------------希尔排序------------- 一直没搞懂希尔排序怎么搞得 def Shell_sort(L): step = len(L)/2 while step > ...

  9. 【原创】经验分享:一个小小emoji尽然牵扯出来这么多东西?

    前言 之前也分享过很多工作中踩坑的经验: 一个线上问题的思考:Eureka注册中心集群如何实现客户端请求负载及故障转移? [原创]经验分享:一个Content-Length引发的血案(almost.. ...

  10. Angluar2 项目搭建

    一 使用 Angular CLI 官方脚手架 1.安装 cli npm install -g @angular/cli 2.创建工作空间和初始应用 ng new my-app 二 tsLint 代码格 ...