用 TextInput 组件替换文本组件 - React Native答案

【问题标题】：Replace Text Component with TextInput Component - React Native用 TextInput 组件替换文本组件 - React Native
【发布时间】：2020-12-29 08:57:36
【问题描述】：

我想在应用程序中显示填空类型组件。

例如：您好，我的名字是_______。再填 _______ 个空格。

我有这样的回复：{text: Hi, my name is insert_input. Some more fill in insert_input blanks.}

<Text>{item.text}<TextInput/></Text>

我有点困惑，我们如何才能做到这一点。

【问题讨论】：

标签： reactjs react-native ecmascript-6

【解决方案1】：

这应该足够了。 Here is the working code

根据字符串拆分句子，并通过在它们之间保留文本输入来将它们背靠背添加。不要为最后一项添加它。

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {

  const string =
    "Hi, my name is insert_input. Some more fill in insert_input blanks.";
  const splitString = string.split("insert_input");

  const modifiedString = () => {
    var newStr = "";
    splitString.map((subStr, i) => {
      newStr =  <Text>
                  <Text>{newStr}</Text> 
                  <Text>{subStr}</Text> 
                  {splitString.length - 1 === i ? null : <TextInput placeholder="________________________"/>}
                </Text>;
    });
    console.log(newStr);
    return newStr;
  };

  
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
       {modifiedString()}
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

【讨论】：

TextInput 没有与 Text 一起渲染，我认为我们无法在 Text 组件内渲染 TextInput 组件。我认为我们需要尝试其他方法。
你能再解释一下吗？不过上面的小吃效果很好。
您的解决方案在上面的零食上运行良好，但是当我们在零食中从 web 切换到 android 时 - TextInput 没有显示在设备上。我已经弄清楚了为什么它不起作用，因为我们没有设置 TextInput 的宽度和高度。
非常感谢您的努力@Glitch_Znab