Question

我正在用React-Native构建一个AndroidTV应用程序。

我一直在指official docs（在Android标签中）。

我正在尝试在元素touchableHandleActivePressIn / TouchableHighlight上使用TouchableOpacity方法

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

不幸的是，这不起作用。当我从另一个元素着眼于该元素时（我确信当我通过更改样式看到它们时，它们会得到关注）。

在此示例中，我没有添加任何占位符按钮来更改焦点，但是该元素不起作用。

我在文档中或Google搜索中找不到此方法的任何实现。
有人知道解决方案吗？

Answer 1

我找到了本机源代码的解决方案。
如果要使用TouchableHighlight或TouchableOpacity组件来构建Android TV应用程序，则应使用以下方法：touchableHandleActivePressIn，touchableHandleActivePressOut，touchableHandlePress，如下所示：

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn onPressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

AndroidTV组件方法处理程序必须声明为道具，而调用的方法必须分别声明为：
onPressIn代表touchableHandleActivePressIn，
onPressOut代表touchableHandleActivePressOut，
和onPress的标准touchableHandlePress。

希望对所有人有帮助，由于缺乏官方文档，我花了2天的时间弄清了这一点。

Answer 2

您的代码中似乎有一些错误。首先，您要创建一个TouchableHightlight标签。那是一个错字-实际上应该是TouchableHighlight。您还将使用</TouchableOpacity>关闭该标签。您需要该结束标记进行匹配，如下所示：

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableHighlight touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableHighlight >
      </View>
    )
  }
}

如果您希望将此元素作为TouchableOpacity元素（与TouchableHighlight不同），则希望它看起来像这样：

class MyComponent extends Component {
  myMethod = () => {
      console.log('Working');
  }

  render() {
    return (
      <View>
        <TouchableOpacity touchableHandleActivePressIn={this.myMethod}>
           <Text>Placeholder</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Answer 3

我在android电视上也遇到了问题。我可以确认d-pad导航正常，因为我可以随机单击按钮并查看其他屏幕。但是，当我专注于/关注和上面的评论中所述的事件时，我都看不到任何UI更改。

onPressIn 用于 touchableHandleActivePressIn
onPressOut （ touchableHandleActivePressOut ）
标准 onPress，用于 touchableHandlePress 。

https://www.facebook.com/groups/reactnativetv/

在Android TV中将焦点放在可触摸元素上的事件处理

3 个答案: