React-native Android TV 开发与安卓手机应用开发的差异

2020-8-3 18:47:22
学习记录
166

使用RN开发安卓和苹果原生应用已经很常见,大多数坑前人已经踩过了,近期有一个开发智能电视app的需求,于是乎,秉承着前人栽树,后人乘凉的想法,开始了 RN 开发 android tv 的踩坑之路。

  • 对于元素的操作有所不同

    Android TV 操作需要使用遥控器,RN对于 TouchableWithoutFeedback TouchableHighlight TouchableOpacity TouchableNativeFeedback 做了优化,Android TV 想要点击、选中某个元素 ,需要被这四种组件包裹。被包裹的标签可以被遥控器选中的,并且 onFocus onBlur onPress 时间组件上的三个时间依然可以正常运行。

    <TouchableWithoutFeedback onFocus={() =>console.log('选中该块了')} onBlur={() =>console.log('离开该块了')} onPress={()=>console.log('点击该块了')> <View> <Text></Text> </View> </TouchableWithoutFeedback>
  • Android TV 不需要考虑状态栏问题

    状态栏在安卓手机上需要很多有各种表现形式,但是在 Android TV 不需要状态栏,因此开发时候不要设置状态栏高度,隐藏最好

  • Android TV 需要特别注意焦点选中问题

    这里推荐使用 react-native-screens 来使焦点激活界面只作用在当前界面,简单用法如下:

    //在APP.js或者index.js中引入 react-native-screens ,并且必须在顶部最先执行 enableScreens方法 import 'react-native-gesture-handler'; import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; import { enableScreens } from 'react-native-screens'; enableScreens(); AppRegistry.registerComponent(appName, () => App);
  • Android TV 网络问题

    默认用的是ipv6 需要使用 emulator 命令启动,手动指定模拟器启动参数

    $ emulator -avd Android_TV_1080p_API_28 -dns-server 192.168.1.1
    • -avd <模拟器名字>
    • -dns-server <路由器ip>

React-native  Android TV 开发与安卓手机应用开发的差异

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com