React Native更新状态数组时避免重渲染以保持键盘持续开启

核心问题分析 #

你遇到的键盘闪烁，本质是列表重渲染时旧输入框失去焦点，新输入框焦点触发存在延迟。即便设置了blurOnSubmit=false，列表项的重渲染仍会导致输入框组件短暂失焦，进而触发键盘收起，直到新输入框获取焦点后重新弹出。

解决方案 #

1. 让输入项组件避免不必要重渲染 #

将MyInput封装为纯组件，确保只有当输入值变化时才重渲染，而非父组件更新就跟着重绘：

import React, { memo } from 'react';
import { TextInput } from 'react-native';

const MyInput = memo(({ value, onChangeText, onSubmitEditing, ref }) => {
  return (
    <TextInput
      value={value}
      onChangeText={onChangeText}
      onSubmitEditing={onSubmitEditing}
      blurOnSubmit={false}
      ref={ref}
      // 其他自定义配置项
    />
  );
});

同时给列表项添加唯一key，帮助React精准识别列表项变化，减少不必要的DOM操作：

<List>
  {players.map((player, index) => (
    <MyInput
      key={index} // 若有玩家唯一ID，优先用ID替代索引
      value={player}
      onChangeText={(text) => {
        const newPlayers = [...players];
        newPlayers[index] = text;
        setPlayers(newPlayers);
      }}
      onSubmitEditing={addPlayer}
      ref={index === players.length - 1 ? lastRef : null}
    />
  ))}
</List>

2. 优化焦点触发时机，摆脱useEffect依赖 #

不要依赖useEffect监听players变化触发焦点，而是在addPlayer中直接处理。利用setPlayers的函数式更新拿到最新状态，再通过requestAnimationFrame确保DOM更新完成后再执行焦点操作：

const lastRef = useRef(null);

function addPlayer() {
  setPlayers(prevPlayers => {
    const newPlayers = [...prevPlayers, ''];
    // 等待React完成组件渲染后再触发焦点
    requestAnimationFrame(() => {
      lastRef.current?.focus();
    });
    return newPlayers;
  });
}

3. 避免父组件不必要重渲染 #

如果父组件存在其他状态，确保这些状态变化不会触发整个列表重渲染。可以用React.memo包裹父组件，或者将玩家列表逻辑抽离为独立子组件。

额外注意事项 #

• 若使用第三方列表组件（如FlatList），需设置extraData={players}，确保列表仅在玩家数据变化时重渲染：

  <FlatList
    data={players}
    extraData={players}
    renderItem={({ item, index }) => <MyInput ... />}
  />
  

• 优先使用玩家唯一ID作为列表项key，而非索引，进一步提升渲染稳定性。

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