React Native Android TV中TextInput无法通过D-pad聚焦选中问题求助

问题根因 #

Android TV的D-pad焦点逻辑和移动端不同，你当前代码存在3个核心问题：

1. TextInput未显式声明TV端可聚焦属性，系统不会将其识别为D-pad可选中的元素
2. !isEnabled分支中TextInput外层包裹的TouchableHighlight本身可聚焦，会拦截焦点，无法透传给内部输入框
3. 多个TextInput共用同一个ref、onFocus回调重复调用focus方法存在逻辑错误

修复步骤 #

• 所有TextInput添加focusable={true}、accessible={true}属性，显式声明可被D-pad聚焦
• 移除无用的重复onFocus回调，多个输入框分别绑定独立ref
• 外层包裹的TouchableHighlight添加onPress逻辑，选中时主动将焦点传给内部TextInput；如果只是为了做聚焦样式，也可以直接移除多余的TouchableHighlight外层包裹，直接用TextInput本身的onFocus回调控制样式即可
• 可选添加nextFocusDown/nextFocusUp等属性，指定D-pad上下移动时的焦点跳转目标，优化操控体验
• 如果聚焦后软键盘不自动弹出，可在输入框onFocus回调中主动触发软键盘唤起

修复后代码示例 #

import { UIManager, findNodeHandle } from 'react-native' // 如需主动唤起软键盘需导入这两个API

// 先声明两个独立的ref
const urlInputRef = useRef(null);
const keyInputRef = useRef(null);

// 软键盘唤起方法（按需添加）
const showSoftKeyboard = (ref) => {
  if (ref.current) {
    UIManager.showSoftInput(findNodeHandle(ref.current), 0);
  }
}

// 渲染部分
<View style={{flexDirection:'column',alignItems:'center'}}>
  { !isEnabled ?
    <TouchableHighlight
      style={[
        styles.input,
        textInputFocused && styles.textInputContainerFocused,
      ]}
      // 选中TouchableHighlight时主动聚焦内部输入框
      onPress={() => urlInputRef.current?.focus()}
      focusable={true}
      accessible={true}
    >
      <TextInput
        ref={urlInputRef}
        focusable={true}
        accessible={true}
        onFocus={() => {
          setTextInputFocused(true);
          showSoftKeyboard(urlInputRef); // 按需添加
        }}
        onBlur={() => {
          setTextInputFocused(false);
        }}
        onChangeText={setUrls}
        value={urls}
        placeholder="Enter Your URL"
        placeholderTextColor="#f4f3f4"
        color='#f4f3f4'
        style={styles.textInput}
        // 可选指定焦点跳转目标
        nextFocusDown={/* 下一个要聚焦的元素ref */}
      />
    </TouchableHighlight>
    : 
    <>
      <TextInput
        ref={urlInputRef}
        focusable={true}
        accessible={true}
        style={styles.input}
        onChangeText={setUrls}
        value={urls}
        placeholder="Enter Your URL"
        placeholderTextColor="#f4f3f4"
        color='#f4f3f4'
        nextFocusDown={keyInputRef}
        onFocus={() => showSoftKeyboard(urlInputRef)}
      />
      <TextInput
        ref={keyInputRef}
        focusable={true}
        accessible={true}
        style={styles.input}
        onChangeText={setKeys}
        value={keys}
        placeholder="Enter Your Account Id"
        placeholderTextColor="#f4f3f4"
        color='#f4f3f4'
        nextFocusUp={urlInputRef}
        onFocus={() => showSoftKeyboard(keyInputRef)}
      />
    </>
  }  
  <View style={{flexDirection:'row'}}>
    <View >
      <Toggle focusable={true} accessible={true}/>
    </View>
    <TouchableOpacity 
      style={styles.search}  
      onPress= {handleSearchButton}
      focusable={true}
      accessible={true}
    >
      <Text style={[styles.watchtext]}>Submit</Text>
    </TouchableOpacity>
  </View>
</View>
<Footer/>

额外注意事项 #

• 所有可交互的元素（Toggle、提交按钮等）都需要添加focusable={true}和accessible={true}属性，否则D-pad都无法选中
• 如果需要更明显的焦点反馈，可以给元素添加聚焦时的样式变化，比如放大、加高亮边框
• 不要多个元素共用同一个ref，会导致ref指向混乱，无法正确控制对应元素

内容的提问来源于stack exchange，提问作者ViShU