我有这个问题：

我需要将“dummy”一词放在第一行中，直到该行完成。

您可以在此处查看示例：https://snack.expo.io/B1KcRgGWX

代码：

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

你必须把你所有的<Text>组件与<Text>!

所以我们有：

import React, { Component } from 'react';
import { StyleSheet, Text, View } 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'
  }
});

但问题是你无法设置borderBottomWidth给你的empty <Text>!

解决方案

1. 嵌套一个<View>在你的中间<Text>.

所以我们有：

import React, { Component } from 'react';
import { StyleSheet, Text, View } 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
  }
});

but 嵌套视图仅限 iOS（Docs)!

2. 对于 Android 来说，这是一些肮脏的编码，但似乎可以工作！

所以我们有这样的东西：

import React, { Component } from 'react';
import { StyleSheet, Text, View } 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'
  }
});

我认为这就是我们可以做到的方式！如果有人有更好的解决方案，我将不胜感激为此撰写答案！

UPDATE

我刚刚创建了一个为此问题在react-native 仓库中！

再次更新！

您可以使用此功能：

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