reactjs - Android TV 中焦点可触摸元素的事件处理

标签 reactjs react-native

我正在使用 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 搜索中找不到此方法的任何实现。
有人知道解决办法吗?

最佳答案

我在react-native源代码中找到了解决方案。
如果您想使用 TouchableHighlightTouchableOpacity 组件构建 Android TV 应用程序,您应该使用以下方法 touchableHandleActivePressIntouchableHandleActivePressOuttouchableHandlePress 像这样:

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

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

AndroidTV 组件方法处理程序必须声明为 prop,并且必须分别声明要调用的方法:
onPressIn 用于 touchableHandleActivePressIn
onPressOut 用于 touchableHandleActivePressOut
以及 touchableHandlePress 的标准 onPress

希望这对任何人都有帮助,由于缺乏官方文档,我花了两天时间才弄清楚。

关于reactjs - Android TV 中焦点可触摸元素的事件处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51427556/

相关文章:

javascript - React - 何时使用钩子(Hook),何时使用 HOC

javascript - 如何在开发模式下减少 webpack 捆绑?

android - React Native 内部错误

react-native - React Native Router Flux 自定义图标

android - react native 错误 : Multiple dex files define Lcom/facebook/binaryresource/BinaryResource while generating a production apk

javascript - 如何在 React FLUX 中创建 API 调用?

reactjs - React Native Lottie - 动画结束时反转

javascript - this.props.history 不重定向

javascript - 更改按钮按下时的可触摸不透明背景颜色 react native

javascript - 如何将图标集成到路线标题旁边的菜单抽屉中