React Native自定义屏幕键盘输入卡顿问题求助

问题核心 #

你当前的代码存在两个关键问题导致延迟：

1. 字符更新逻辑错误：点击按键时直接替换整个文本而非追加字符，删除操作直接清空文本，既不符合输入逻辑，也会引发不必要的状态更新。
2. 不必要的重渲染：每次父组件状态更新时，传递给TextKeyboard的回调都是新创建的匿名函数，导致键盘组件每次都完全重渲染；同时键盘内大量重复的TouchableOpacity代码，也加重了渲染负担。

解决方案 #

1. 修复文本更新逻辑 #

使用函数式状态更新实现字符追加和末尾删除，符合正常输入预期。

2. 阻止不必要的重渲染 #

• 用React.memo包裹TextKeyboard组件，仅在props真正变化时重渲染。
• 用useCallback包裹父组件的回调函数，保持函数引用稳定。

3. 优化键盘组件代码 #

将按键数据抽成数组，通过循环渲染按键，减少冗余代码的同时提升渲染效率。

修改后的代码 #

屏幕组件 #

import React, { useState, useCallback } from 'react';
import { View, TextInput, Animated, Text } from 'react-native';
import TextKeyboard from './TextKeyboard';

const NameScreen = () => {
  const [name, setName] = useState('');

  // 用useCallback保持函数引用稳定
  const handleAddChar = useCallback((char) => {
    setName(prev => prev + char);
  }, []);

  const handleDelete = useCallback(() => {
    setName(prev => prev.slice(0, -1));
  }, []);

  return (
    <View style={styles.screen}>
      <View style={styles.container}>
        <Animated.View>
          <Text size={25} color="gray3">Your full name</Text>
        </Animated.View>

        <TextInput 
          value={name} 
          onChangeText={(text) => setName(text)} 
          style={styles.name}
        />

        <TextKeyboard 
          onAddChar={handleAddChar} 
          onDelete={handleDelete}
        />
      </View>
    </View>
  );
};

const styles = {
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    width: '90%',
    gap: 20,
  },
  name: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    fontSize: 20,
    padding: 10,
  },
};

export default NameScreen;

TextKeyboard组件 #

import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import CustomText from './CustomText';

// 用React.memo包裹，避免不必要重渲染
const TextKeyboard = React.memo(({ onAddChar, onDelete }) => {
  // 按键数据数组，减少冗余代码
  const keyRows = [
    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Ç'],
    ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
  ];

  return (
    <View style={styles.container}>
      {keyRows.map((row, rowIndex) => (
        <View key={rowIndex} style={styles.line}>
          {row.map((char) => (
            <TouchableOpacity
              key={char}
              onPress={() => onAddChar(char)}
              style={styles.btn}
            >
              <CustomText color="white" size={35}>{char}</CustomText>
            </TouchableOpacity>
          ))}
          {/* 第三行添加删除键 */}
          {rowIndex === 2 && (
            <TouchableOpacity
              onPress={onDelete}
              style={[styles.btn, styles.btnDelete]}
            >
              <CustomText color="white" size={35}>DELETE</CustomText>
            </TouchableOpacity>
          )}
        </View>
      ))}
      <View style={styles.line}>
        <TouchableOpacity
          onPress={() => onAddChar(' ')}
          style={[styles.btn, styles.btnSpace]}
        />
      </View>
    </View>
  );
});

const styles = {
  container: {
    gap: 10,
  },
  line: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    gap: 5,
  },
  btn: {
    backgroundColor: '#333',
    padding: 15,
    borderRadius: 5,
  },
  btnDelete: {
    flex: 2,
    alignItems: 'center',
  },
  btnSpace: {
    flex: 1,
  },
};

export default TextKeyboard;

额外优化建议 #

• 若仍有延迟，可尝试用Pressable替代TouchableOpacity，响应速度略快。
• 将静态数据（如keyRows）放在组件外部，避免渲染时重复创建。

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