Блог

Я хочу отобразить заполнение в компоненте типа пробелов в приложении.

Например: Привет, меня зовут _______. Еще немного заполнить _______ пробелы.

У меня есть ответ примерно такого: {text: Hi, my name is insert_input. Some more fill in insert_input blanks.}

 <Text>{item.text}<TextInput/></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',
  },
});