React Native Text 组件在 TextInput 组件内部 iOS 上的问题：在 TextInput 组件内部键入文本时失去焦点

Question

 <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),
                // lineHeight: 40,
                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,
                    // marginTop: Platform.OS == 'ios' ? 0 :10,
                    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"
                
                      // contentStyle={{
                      //   paddingLeft: 5,
                      //   height: 26,
                      //   paddingRight: 5,
                      //   paddingTop: 0,
                      //   paddingBottom: 0,
                      // }}
                      // mode={'outlined'}
                      onChangeText={setInputValue}
                    />
                </TouchableOpacity>
              )}
            </Text>
          );
        })}
      </Text>

我在 React Native 中的 TextInput 组件遇到问题，特别是在 iOS 设备上。每当我尝试在 TextInput 中输入文本时，我都会注意到仅输入一个字符后焦点就会丢失。此问题在 Android 设备上不存在，其中 TextInput 的行为符合预期。

我尝试调查潜在的原因，例如键盘配置、焦点管理或 TextInput 属性，但我一直无法找到解决方案。

还有其他人遇到过类似的问题吗？如果是这样，您能否提供解决此问题的见解或潜在的解决方案？任何帮助将不胜感激。谢谢你。

Answer 1

我尝试了另一种方法来解决此问题，请检查下面的代码

    const paragraph='The heart functions as a pump at the centre of the circulatory system. In humans it TEXTINPUT_0 located in the chest cavity, between the lungs, a bit to the left. The heart consists of four chambers surrounded by a very strong muscular wall, the myocardium. The upper chambers, the right and left atria, TEXTINPUT_1 blood entering the heart, and the lower chambers, the right and left ventricles pump the blood out of the heart, via the pulmonary and the systemic circulatory systems. The two systems work as TEXTINPUT_2'
    
    // created component 
    const ParagraphWithInputs = ({ paragraph }) => {
      // Split the paragraph into words
      const words = paragraph.split(' ');
    
      // State to store input values
      const [inputValues, setInputValues] = useState({});
    
      // Function to handle text change in TextInput components
      const handleTextChange = (index, value) => {
        setInputValues({ ...inputValues, [index]: value });
      };
      console.log('sdhgfhdsfgud',inputValues);
      return (
        <View style={{ flexDirection: 'row', flexWrap: 'wrap',width:screenWidth-32,alignSelf:'center' }}>
          {words.map((word, index) => {
            if (word.startsWith('TEXTINPUT_')) {
              // If the word is a TEXTINPUT placeholder, render a TextInput component
              const inputKey = word;
              return (
                <View key={index} style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <TextInput
                    style={{ borderWidth: 1, width: 100,height:26,borderRadius:5,marginEnd:5,padding:0 ,paddingHorizontal:3,}} // Fixed width for TextInput
                    value={inputValues[word] || ''}
                    onChangeText={(text) => handleTextChange(word, text)}
                  />
                </View>
              );
            } else {
              // If the word is regular text, render it within a Text component
              return <Text style={{lineHeight:40}} key={index}>{word} </Text>; // Add space after each word
            }
          })}
        </View>
      );
    };
// use component in your code
  <ParagraphWithInputs paragraph={paragraph} />