React Native iOS端Text嵌套TextInput输入时失焦问题求助

问题复现代码 #

<Text
  style={{
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    textAlign: "left",
    textAlignVertical: "center",
    lineHeight: 40,
    width: screenWidth - 32,
  }}
>
  {textwithinput.map((item: any, index: number) => {
    return (
      <Text
        key={index}
        style={{
          color: themeColor.headertextColor,
          fontSize: getFontSize(16),
          fontFamily: fonts.openSansRegular4,
          justifyContent: "center",
          alignItems: "center",
          textAlign: "left",
          textAlignVertical: "center",
          alignSelf: "center",
        }}
      >
        {item.startsWith("TEXT_INPUT_") ? "" : item}
        {item.startsWith("TEXT_INPUT_") && (
          <TouchableOpacity
            style={{
              padding: 0,
              backgroundColor: "red",
            }}
          >
            <TextInputPaper
              value={inputValue}
              ref={null}
              style={{
                height: 26,
                width: 80,
                padding: 0,
                borderRadius: 5,
                paddingRight: 5,
                paddingLeft: 5,
                backgroundColor: colors.transparent,
                fontSize: getFontSize(16),
                fontFamily: fonts.openSansMedium5,
                color: themeColor.textColor,
                borderWidth: 1,
                borderColor: themeColor.selectedBG,
              }}
              keyboardType="default"
              autoCorrect={false}
              autoCapitalize="none"
              onChangeText={setInputValue}
            />
          </TouchableOpacity>
        )}
      </Text>
    );
  })}
</Text>

问题描述 #

iOS端TextInput输入单个字符后立即失去焦点，Android端表现正常，已排查键盘配置、焦点管理、TextInput基础属性，未解决问题。

分析思路 #

1. 组件重渲染导致焦点丢失：输入字符触发setInputValue，父组件重渲染，循环生成的<Text>组件（含TextInput）被重新创建，iOS对组件重建后的焦点管理逻辑与Android不同，直接丢失焦点。
2. Text组件嵌套交互元素的兼容性问题：React Native的<Text>组件设计用于文本渲染，嵌套<TouchableOpacity>、<TextInput>这类交互组件时，iOS的视图层级交互逻辑易出现冲突。
3. TouchableOpacity的干扰：TextInput本身是可交互组件，额外包裹TouchableOpacity会在iOS上触发不必要的触摸事件，抢夺焦点。
4. key值不稳定：使用index作为key，在组件重渲染时无法保证组件实例的稳定复用，间接导致焦点丢失。

可行解决方案 #

方案1：重构布局，用View替代外层Text #

将承载循环元素的外层<Text>改为<View>，避免Text组件嵌套交互元素：

<View
  style={{
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    lineHeight: 40,
    width: screenWidth - 32,
  }}
>
  {textwithinput.map((item: any, index: number) => {
    return (
      <View key={item} style={{ flexDirection: 'row', alignItems: 'center' }}>
        {!item.startsWith("TEXT_INPUT_") && (
          <Text
            style={{
              color: themeColor.headertextColor,
              fontSize: getFontSize(16),
              fontFamily: fonts.openSansRegular4,
            }}
          >
            {item}
          </Text>
        )}
        {item.startsWith("TEXT_INPUT_") && (
          <TextInputPaper
            value={inputValue}
            style={{
              height: 26,
              width: 80,
              padding: 0,
              borderRadius: 5,
              paddingRight: 5,
              paddingLeft: 5,
              backgroundColor: colors.transparent,
              fontSize: getFontSize(16),
              fontFamily: fonts.openSansMedium5,
              color: themeColor.textColor,
              borderWidth: 1,
              borderColor: themeColor.selectedBG,
            }}
            keyboardType="default"
            autoCorrect={false}
            autoCapitalize="none"
            onChangeText={setInputValue}
          />
        )}
      </View>
    );
  })}
</View>

方案2：用React.memo优化子组件，避免不必要重渲染 #

将循环内的元素抽为独立组件，用React.memo包裹，仅当props变化时才重渲染：

import React, { memo } from 'react';

const InputTextItem = memo(({ item, inputValue, setInputValue, themeColor, fonts, getFontSize }) => {
  return (
    <Text
      style={{
        color: themeColor.headertextColor,
        fontSize: getFontSize(16),
        fontFamily: fonts.openSansRegular4,
        justifyContent: "center",
        alignItems: "center",
        textAlign: "left",
        textAlignVertical: "center",
        alignSelf: "center",
      }}
    >
      {item.startsWith("TEXT_INPUT_") ? "" : item}
      {item.startsWith("TEXT_INPUT_") && (
        <TextInputPaper
          value={inputValue}
          style={{
            height: 26,
            width: 80,
            padding: 0,
            borderRadius: 5,
            paddingRight: 5,
            paddingLeft: 5,
            backgroundColor: colors.transparent,
            fontSize: getFontSize(16),
            fontFamily: fonts.openSansMedium5,
            color: themeColor.textColor,
            borderWidth: 1,
            borderColor: themeColor.selectedBG,
          }}
          keyboardType="default"
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={setInputValue}
        />
      )}
    </Text>
  );
});

// 父组件中使用
<Text
  style={{
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    textAlign: "left",
    textAlignVertical: "center",
    lineHeight: 40,
    width: screenWidth - 32,
  }}
>
  {textwithinput.map((item: any) => {
    return <InputTextItem key={item} item={item} inputValue={inputValue} setInputValue={setInputValue} themeColor={themeColor} fonts={fonts} getFontSize={getFontSize} />;
  })}
</Text>

方案3：移除TouchableOpacity包裹 #

TextInput本身支持点击获取焦点，无需额外包裹TouchableOpacity，直接移除即可减少iOS上的交互冲突。

方案4：手动恢复焦点（临时方案） #

若上述方案无法快速落地，可通过useRef手动保存TextInput引用，在输入后强制恢复焦点：

import React, { useRef } from 'react';

// 父组件内定义ref
const inputRef = useRef(null);

// 修改setInputValue
const setInputValue = (text) => {
  // 假设inputValue是useState的状态变量
  setInputValueState(text);
  // iOS端手动恢复焦点
  Platform.OS === 'ios' && inputRef.current?.focus();
};

// TextInput设置ref
<TextInputPaper
  ref={inputRef}
  // 其他属性不变
/>

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