React Native动态输入框输入时键盘消失、重复渲染问题求解

问题 #

基于对象生成动态输入字段时，每输入一个字符键盘就消失，所有输入框强制重渲染，无法连续输入。试过复制对象修改副本但问题依旧，单独调用renderTextInput功能正常，需要解决输入时的不必要重渲染问题。

原因分析 #

1. Key值不稳定：当前renderTextInput中给外层View设置的key是value，输入时value实时变化，会让React认为这是新组件，直接销毁重建，导致焦点丢失、键盘收起。
2. 回调函数频繁重建：map循环里直接定义的onChangeText回调，每次组件渲染都会生成新函数，导致renderTextInput的props变化，触发无意义的重渲染。

解决方案 #

1. 改用稳定的Key值 #

把外层View的key换成对象的唯一键（比如"Company Name"这类固定标识），不要用随输入变化的value，确保组件身份稳定，避免React销毁重建组件。

2. 缓存回调函数 #

用useCallback缓存onChangeText回调，避免每次渲染生成新函数，减少因props变化引发的重渲染。

3. 封装纯组件（可选，进一步优化） #

把输入框逻辑抽成独立的纯组件，配合React.memo让组件只在props真正变化时才重渲染。

修改后代码示例 #

主组件部分 #

import { useCallback } from 'react';

// ...其他逻辑代码

return(
     <View>
        {Object.keys(label).map( (key) => {
          // 用useCallback缓存回调，依赖项设为key
          const handleInputChange = useCallback((text) => {
            setLabel(prevLabel => ({ ...prevLabel, [key]: text }));
          }, [key]);
          return renderTextInput(key, key, label[key], handleInputChange, 'default');
        })}
     </View>    
)  

修改renderTextInput函数 #

const renderTextInput = (label, placeholder, value, onChangeText, keyboardType) => {
    return (
      {/* 用固定的label（即对象的key）作为组件key */}
      <View key={label}>
        <Text style={{ fontWeight: 'bold' }}>{placeholder}</Text>
        <View style={ScannerStyle.shadow}>
          <TextInput
            style={ScannerStyle.input}
            placeholder={placeholder}
            placeholderTextColor="#aaaaaa"
            value={value}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={onChangeText}
            keyboardType={keyboardType}
          />
        </View>
      </View>
    );
};

可选：封装成纯组件（更推荐） #

import { memo } from 'react';

// 用memo包裹，仅在props变化时重渲染
const CustomTextInput = memo(({ label, placeholder, value, onChangeText, keyboardType }) => {
    return (
      <View key={label}>
        <Text style={{ fontWeight: 'bold' }}>{placeholder}</Text>
        <View style={ScannerStyle.shadow}>
          <TextInput
            style={ScannerStyle.input}
            placeholder={placeholder}
            placeholderTextColor="#aaaaaa"
            value={value}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={onChangeText}
            keyboardType={keyboardType}
          />
        </View>
      </View>
    );
});

// 主组件调用示例
return(
     <View>
        {Object.keys(label).map( (key) => {
          const handleInputChange = useCallback((text) => {
            setLabel(prevLabel => ({ ...prevLabel, [key]: text }));
          }, [key]);
          return <CustomTextInput 
                  label={key} 
                  placeholder={key} 
                  value={label[key]} 
                  onChangeText={handleInputChange} 
                  keyboardType="default" 
                />;
        })}
     </View>    
)  

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