React native 连续文本组件中的空白文本空间

我有一个问题：

我需要把单词“dummy”放在第一行，直到这一行完成

您可以在此处看到示例：

守则：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.paragraphs}>
          <Text style={styles.textParagraph}>Lorem Ipsum is</Text>
          <Text style={styles.emptyTerm} />
          <Text style={styles.textParagraph}>dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 25,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
    emptyTerm: {
    borderBottomWidth: 1,
    marginLeft: 5,
    marginRight: 5,
    minWidth: "25%"
  },
    paragraphs: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
});

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet}；
从“expo”导入{Constants}；
导出默认类应用程序扩展组件{
render（）{
返回(
同侧视野
印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本字体样本书
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
填充：25，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
空数据库：{
边界宽度：1，
边缘左：5，
marginRight:5，
最小宽度：“25%。”
},
段落：{
flexDirection:“行”，
柔性包装：“包装”
},
});

您必须用

包装所有

组件

因此，我们：

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          <Text>Lorem Ipsum is </Text>
          <Text>{"     "}</Text>
          <Text>
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  }
});

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          <Text>Lorem Ipsum is </Text>
          <View style={styles.nestedViewStyle}>
          <Text >{"     "}</Text>
          </View>
          <Text>
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  },

  nestedViewStyle: {
    width: 50,
    borderBottomWidth: 1,
    marginVertical: 5,
  }
});

但是嵌套视图仅限于iOS（）

对于android来说，这是一些肮脏的编码，但似乎是可行的 所以我们有这样的东西：

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          <Text>Lorem Ipsum is </Text>
          <Text style={{ textDecorationLine: "underline" }}>
            {"            "}
          </Text>
          <Text>
            {" "}
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  }
});

import React，{Component}来自“React”；
从“react native”导入{Text，View，StyleSheet}；
导出默认类应用程序扩展组件{
render（）{
返回(
同侧视野
{"            "}
{" "}
印刷和排版行业的虚拟文本
自16世纪以来，一直是行业标准的虚拟文本
一位不知名的印刷工拿起一个打字的厨房，把它翻了个底朝天
活字样书
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:“行”，
对齐项目：“中心”，
辩护内容：“中心”，
填充：25，
paddingTop:20，
背景颜色：“ecf0f1”
}
});

这是我认为我们可以做到的方式！如果有人有更好的解决方案，我会很感激为这个问题写一个答案

更新

我刚刚创建了一个本地回购

再次更新！ 您可以使用此功能：

splitPhrase = (phrase, isTerm = false) => {
  let words = phrase.split(" ");
  return words.map((i, k) => {
    return (
      <Text key={k} style={isTerm ? styles.emptyTerm : styles.paragraphs}>
        {" "}
        {i}{" "}
      </Text>
    );
  });
};

splitPhrase=（短语，isTerm=false）=>{
让单词=短语。拆分（“”）；
返回words.map（（i，k）=>{
返回(
{" "}
{i} {“}
);
});
};

这确实是一个肮脏的解决方案，但现在对我来说很有效，不幸的是，我看不到更好的解决方案。是的！我已经打开了那个问题！如果您+1，那就太好了。我对您的解决方案有一个问题：子组件在另一个组件中时，仅当它在另一个组件中，并且我需要它时，才触发适当的布局。：'（我需要触发事件onLayout，所以使用一个子文本它不是一个选项。我用这个函数解决这个问题：

splitPhrase=（phrase，isTerm=false）=>{let words=phrase.split（“”）；return words.map（（I，k）=>{return（{I}）；}）；

我将把这个添加到我的答案中以供进一步参考。很高兴它被解决了！