React Native Android TV 第二个TextInput提交时聚焦按钮方法

第二个输入框提交后无法聚焦按钮，是三个逻辑冲突导致的：

• 第二个TextInput设置了blurOnSubmit={false}，提交后输入框会持续持有焦点，直接调用按钮的focus()方法会被输入框的焦点抢占逻辑拦截
• 包裹TextInput的外层TouchableHighlight写了强制重定向焦点到内部输入框的onFocus逻辑，焦点尝试移动到按钮的过程中如果触碰到外层Touchable的焦点判定，会直接把焦点拉回输入框
• Android TV 软键盘触发提交事件后存在短暂的系统焦点锁，同步执行的焦点跳转逻辑会被系统拦截，不会生效

按以下步骤调整代码即可：

1. 差异化配置两个输入框的blurOnSubmit属性：第一个输入框需要跳转到第二个输入框，保留blurOnSubmit={false}；第二个是最后一个输入项，修改为blurOnSubmit={true}，提交后主动释放输入框焦点
2. 删除两个包裹TextInput的TouchableHighlight上冗余的onFocus焦点重定向逻辑，TextInput本身可以独立响应焦点，不需要外层Touchable强制拉取焦点
3. 第二个输入框的onSubmitEditing回调中，不要同步调用按钮的聚焦方法，加100ms左右的延迟，等系统焦点锁释放、输入框完成失焦流程后，再触发按钮聚焦
4. 注意keyboardShouldPersistTaps是ScrollView/FlatList等滚动组件的属性，普通View上配置无效，直接移除即可

<View style={{flexDirection:'column',alignItems:'center'}}>
  {/* 第一个输入框 */}
  <TouchableHighlight 
    onPress={()=>InputTextRef.current.focus()}
  >
    <TextInput
      ref={InputTextRef}
      onSubmitEditing = {()=>InputTextRef2.current && InputTextRef2.current.focus()}
      blurOnSubmit={false}
      onChangeText={setUrls}
      value={urls}
      placeholder="Enter Your URL"
      placeholderTextColor="#f4f3f4"
      color= '#f4f3f4'
      autoCorrect={false}
      autoFocus={focus1 ? true :false}
      onFocus={onFocus1}
      onBlur={onBlur1}
      style={android_tv? [styles.input,  focus1 ? styles.TextInputFocused :null]:styles.input} 
    />
  </TouchableHighlight >

  {/* 第二个输入框 */}
  <TouchableHighlight 
    onPress={()=>InputTextRef2.current.focus()}
  >
    <TextInput
      ref={InputTextRef2}
      onSubmitEditing = {()=>{
        // 加延迟绕开系统焦点锁
        setTimeout(() => {
          btnref.current && btnref.current.focus()
        }, 100)
      }}
      blurOnSubmit={true} // 最后一个输入框提交后主动失焦
      onChangeText={setKeys}
      value={keys}
      placeholder="Enter Your Account Id"
      placeholderTextColor="#f4f3f4"
      color= '#f4f3f4'
      autoCorrect={false}
      autoFocus= {focus2 ? true :false}
      onFocus={onFocus2}
      onBlur={onBlur2}
      style={android_tv?[styles.input,  focus2 ? styles.TextInputFocused :null]:styles.input}
    />
  </TouchableHighlight > 

  {/* 提交按钮 */}
  <TouchableHighlight 
    onFocus={onFocus} 
    onBlur={onBlur} 
    ref={btnref}
    style={[ styles.search ,  focus ? styles.wrapperFocused :null]}  
    onPress= {handleSearchButton}>
    <Text  style={ android_tv ? styles.watchtext1 : styles.watchtext2 }>Submit</Text>
  </TouchableHighlight>
</View>

如果100ms延迟下仍偶发焦点跳转失败，可以把延迟时长调整到150-200ms，不同Android TV厂商的系统焦点锁时长略有差异。

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