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

Question

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

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

Answer 1

Touchables 组件可以通过电视 Remote 聚焦，因此将您的 TextInput 封装在可触摸中是一个好方法，另外您可以更改样式以获得好看的聚焦效果(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>
        )
    }