连续文本组件中的空文本空间反应原生

Question

我有这个问题：

我需要说出＆＃34; dummy＆＃34;在第一行直到该行完成。

  

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

代码：

itemsList = getAllFavorites();

    Favorites favorites = new Favorites();
    for (int i = 0; i < getAllFavorites().size(); i++) {
        favorites.setFavoritesId(getAllFavorites().get(i).getFavoritesId());
        favorites.setLargeImgURL(getAllFavorites().get(i).getLargeImgURL());
        favorites.setPreviewImgURL(getAllFavorites().get(i).getPreviewImgURL());
        favorites.setImageId(getAllFavorites().get(i).getImageId());
        Log.d(TAG, "All Favs Ids:\t" + getAllFavorites().get(i).getFavoritesId());
        objectList.add(favorites);
    }

    //objectList.add(itemsList); // I have tried adding the first list of Favorite model class into the adapter list but it gives `classcast exception: Model class can't be cast to ArrayList`

Answer 1

您必须使用<Text>包裹所有<Text>个组件！

所以我们有：

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

但问题是您无法将borderBottomWidth设置为空 <Text>！

解决方案

1. 将<View>嵌套在<Text>。
的中间

所以我们有：

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（Docs）！

1. 对于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"
  }
});

这就是我认为我们可以做到的方式！如果有人有更好的解决方案，我将非常感谢为此写了一个答案！

<强>更新

我刚刚在react-native repo中创建了一个issue for this！

再次更新！

您可以使用此功能：

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