无法专注于 TextInput React Native - Amazon Fire Stick [英] Cannot focus on TextInput React Native - Amazon Fire Stick

问题描述

我正在开发一个 ReactNative 应用程序，我有以下代码呈现一个 TextInput 和一个向我的 API 提交请求的按钮.使用我的 Android TV 模拟器，我可以先用鼠标选择文本输入，然后在键盘上输入，从而在文本字段中输入输入.我可以点击连接"按钮也是如此，一切都按预期工作.当我在 Amazon Fire Stick 上安装此应用程序时，TextInput 不再可选.我可以选择连接"按钮，可以看到 ui 反映按钮上的按钮点击，但 TextInput 不会聚焦或启动屏幕键盘.通过在 <TextInput/> 上设置 autoFocus={true} ，我能够让键盘获得焦点，但这会导致不太理想的用户体验.我怎样才能解决这个问题?这是我的代码:

I am working on a ReactNative app and I have the following code that renders a TextInput and a button which submits a request to my API. With my Android TV emulator, I can type input into the text field by first selecting the text input with my mouse and then typing on my keyboard. I can click the "connect" button too and all works as expected. When I installed this app on an Amazon Fire Stick, the TextInput was no longer selectable. I could select the "connect" button and could see the ui reflect button clicks on the button, but the TextInput would not focus or launch the on screen keyboard. I was able to get the keyboard to gain focus by setting autoFocus={true} on the <TextInput /> but this results in a less than optimal user experience. How can I fix this? Here is my code:

<>
      <Text styles={styles.text}>Enter your device code.</Text>
                
      <TextInput keyboardType={'number-pad'} style={styles.input} onChange={this.handleChange} value={this.state.code} />
                
      <Button
        styles={styles.button}
        onPress={(e) => {this.getToken(e)}}
        title="Connect"
        color="green"
        accessibilityLabel="Connect your device"
      />
</>

我觉得这篇文章解决了与我相同的问题，但我不明白 ReactNative(不是 TypeScript)的解决方案是什么:https://callstack.com/blog/amazon-fire-tv-stick-app-in-react-native/

I felt like this article was addressing the same issue as mine but I don't understand what the solution would be for ReactNative (not TypeScript): https://callstack.com/blog/amazon-fire-tv-stick-app-in-react-native/

推荐答案

已知问题:

• TextInput 组件暂时不起作用(即它们无法接收自动对焦，请参阅此评论).

• TextInput components do not work for now (i.e. they cannot receive focus automatically, see this comment).

但是可以使用 ref 来手动触发inputRef.current.focus().

It is however possible to use a ref to manually trigger inputRef.current.focus().

您可以将输入包装在 TouchableWithoutFeedback 组件中并在该可触摸的 onFocus 事件中触发焦点.这允许通过箭头键打开键盘.

You can wrap your input inside a TouchableWithoutFeedback component and trigger focus in the onFocus event of that touchable. This enables opening the keyboard via the arrow keys.

键盘可能会在每次按键后重置其状态(这可能仅在 Android TV 模拟器中发生).

The keyboard might reset its state after each keypress (this might only happen inside the Android TV emulator).

Modal 组件的内容无法获得焦点，见这个问题详情.

The content of Modal components cannot receive focus, see this issue for details.

从 React Native 复制内容

这篇关于无法专注于 TextInput React Native - Amazon Fire Stick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！