onFocus 和 onBlur 不起作用，本机反应

Question

我正在尝试使用 react-native 构建一个 androidTV 应用程序并且我遵循了文档，但是无论我做什么，onFocus 和 onBlur 似乎都不适合我，这是代码：

const App = () => {
  return (
    <View>
      <TouchableHighlight
        hasTVPreferredFocus={true}
        accessible={true}
        onFocus={() => alert('focus')}
        onBlur={() => alert('blur')}
        onPress={() => alert('press')}>
        <Text>This is a text</Text>
      </TouchableHighlight>
      <Button title="title" />
    </View>
  );
};

我还添加了 hasTVPreferredFocus 和 accessible 以确保我没有遗漏任何内容。

Answer 1

它不起作用，因为该组件不监听那些事件，请查看文档：

https://reactnative.dev/docs/touchablehighlight

Answer 2

import React from 'react';
import { TextInput } from 'react-native';
import { styles } from './styles';

const Input = (props) => {
  const [focused, setFocused] = React.useState(false);
  return (
    <TextInput
      {...props}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={focused ? styles.inputFocused : styles.input}
    />
  );
};

export default Input;

如果你的道具覆盖了 onFocus 功能，就像这样把它放在头上

Answer 3

我找到了修复方法，似乎 npx react-native init <ProjectName> 不完整并且其中缺少一些文件。相反，我使用 react-native init <ProjectName> --template=react-native-tvos 并且有效！我认为 tvos 版本比运行更适合电视开发。

onFocus 和 onBlur 不起作用，本机反应

onFocus and onBlur doesnt work , react-native

javascript

react-native

native

android-tv