无法专注于 TextInput React Native - Amazon Fire Stick答案

【问题标题】：Cannot focus on TextInput React Native - Amazon Fire Stick无法专注于 TextInput React Native - Amazon Fire Stick
【发布时间】：2021-06-13 04:18:49
【问题描述】：

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

<>
      <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/

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

Touchables 组件可以通过 TV 遥控器进行聚焦，因此将 TextInput 封装在 touchable 中是一个好方法，另外您可以更改样式以获得好看的聚焦效果（onPress 或 onFocus 事件）

constructor(props) {
        super(props)

        this.state = {
            focused: false
        }
    
        this.inputRef = React.createRef()
    }
    
    onFocus(){
        this.setState({focused: true}, () => {
            this.inputRef.current.focus()
        })
    }

    onBlur(){
        this.setState({focused: false}, () => {
            this.inputRef.current.blur()
        })
    }

    render() {
        return (
            <View>
                <TouchableHighlight
                    onPress={this.onFocus}
                    onBlur={this.onBlur}
                    style={[styles.wrapper, this.state.focused ? styles.wrapperFocused : null]}>
                        <TextInput ref={this.inputRef} />
                </TouchableHighlight>
                
            </View>
        )
    }

【讨论】：

【解决方案2】：

你想在你的组件第一次渲染时聚焦它吗？？

您可以为此尝试 TextInput 的 autoFocus 属性，否则，

const ref = useRef(null);
<TextInput ref={ref}/>

然后您可以通过 ref.current.focus() 聚焦 InputText

【讨论】：

我希望能够使用电视遥控器导航到输入字段，选择输入字段，然后通过屏幕键盘输入。

【解决方案3】：

已知问题：

TextInput 组件暂时无法工作（即它们无法接收自动对焦，见this comment)。
但是可以使用 ref 手动触发 inputRef.current.focus().
您可以将输入包装在 TouchableWithoutFeedback 组件中并在该可触摸的 onFocus 事件中触发焦点。这允许通过箭头键打开键盘。
键盘可能会在每次按键后重置其状态（这可能只发生在 Android TV 模拟器内）。
Modal组件的内容无法获得焦点，见this issue 了解详情。

Content Copy from React Native

【讨论】：