Reactjs 将文本组件替换为TextInput组件-反应本机

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

例如：嗨，我的名字是。再多填些空白

我的回答是这样的：

{text:Hi，我的名字是insert\u input。更多的人填写insert\u input空格。}

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

{item.text}

---

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

这应该足够了

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

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',
  },
});

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet，TextInput}；
从“expo常量”导入常量；
//可以从本地文件导入
从“./components/AssetExample”导入AssetExample；
//或npm中可用的任何纯javascript模块
从“react native paper”导入{Card}；
导出默认函数App（）{
常量字符串=
“嗨，我的名字是insert_input。还有一些人填写insert_input空格。”；
const splitString=string.split（“插入_输入”）；
常量modifiedString=（）=>{
var newStr=“”；
splitString.map（（subStr，i）=>{
newStr=
{newStr}
{subStr}
{splitString.length-1==i？null:}
;
});
console.log（newStr）；
返回新闻TR；
};
返回(
{modifiedString（）}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
第段：{
差额：24，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
});

TextInput没有使用文本进行渲染，我想我们无法在文本组件内部渲染TextInput组件。我想我们需要试试别的。你能再解释一下吗？不过，上面的小吃运行良好。您的解决方案在上面的小吃上运行良好，但当我们在小吃中从web切换到android时，设备上没有显示文本输入。我已经弄明白了为什么它不起作用，因为我们没有设置文本输入的宽度和高度。非常感谢您的努力@Glitch_Znab