React Native 中带有换行符的多个文本组件

Question

我正在尝试让一个段落在 React Native 中正确对齐，但到目前为止我一直无法达到所需的外观。

这个组件是一个简单的盒子，包含三个主要的<Text/> 组件。这些组件中的每一个都具有完全不同的样式，并且它们接收作为道具传递下来的字符串变量。

我想要的最终外观是：

我尝试按如下方式构建组件：

<View style={layoutStyles.mainContainer}>
      <View style={layoutStyles.textContainer}>
        <Text style={textStyles.highlightedText}>{highlightedText}</Text>
        <View style={layoutStyles.contentContainer}>
          <Text style={textStyles.content}>{content}</Text>
        </View>
      </View>
      <Text style={textStyles.linkText}>{link}</Text>
      <View style={layoutStyles.exitContainer}>
        <Icon
          name="CROSS"
          style={textStyles.exitText}
          lineHeight={30}
          size={25}
        />
      </View>
    </View>

并将其设置为：

    export const layoutStyles = StyleSheet.create({
  mainContainer: {
    marginVertical: 40,
    alignSelf: 'center',
    width: 355,
    height: 74,
    borderRadius: 4,
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'blue',
  },
  textContainer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    width: 180,
    backgroundColor: 'red',
  },
  contentContainer: {
    backgroundColor: 'green',
    alignSelf: 'flex-start',
  },
  exitContainer: {
    alignSelf: 'center',
    marginLeft: 20,
  },
});

export const textStyles = StyleSheet.create({
  highlightedText: {
    color: 'blue',
    fontSize: 12,
    lineHeight: 18,
    fontWeight: '600',
    backgroundColor: 'blue',
  },
  content: {
    color: 'blue',
    fontSize: 12,
    lineHeight: 18,
  },
  linkText: {
    color: 'grey',
    textDecorationLine: 'underline',
    fontSize: 12,
    lineHeight: 18,
  },
  exitText: {
    color: 'black',
  },
});

但是由于背景的颜色很明显，我不知道如何对齐文本，以便“内容”下降到“突出显示的文本”下方

我不知道如何解决它。任何帮助都深表感谢。

Answer 1

我假设您希望文本出现在上一张图片的红色方块内。那是行不通的，因为那时需要在View 中定义文本。我将进行重组，以便您拥有三个带有文本的区域。根据您的上一张图片，您可以这样做：

下面是你如何实现它

<View style={{alignSelf: 'center',marginVertical: 40, width: 355, height: 74, flexDirection: 'column' }} >
    <View style={{flexDirection: 'row'}} >
        <View >
            <Text>{'Highlighted text'}</Text>
        </View>
        <View style={{marginLeft: 10}} >
            <Text>{'then some regular'}</Text>
        </View>
        </View>
        <View >
            <Text>{'text which drops a line and goes on here'}</Text>
        </View>
    </View >

编辑： 如果需要换行符的原因是为了适合字符串，您可以使用 substring 将字符串分成适当大小的两个不同部分。要在不拆分单词的情况下拆分字符串，您可以执行以下操作：

render() {
    const { highlightedText, content } = this.props
    const characterLimit = 20;
    let splitIndex = characterLimit; 
    while(content.charAt(splitIndex) !== ' ' && splitIndex > 0) { 
        splitIndex--;
    }
    const first = content.substring(0, splitIndex);
    const second = content.substring(splitIndex + 1, content.length);
    return (
        <View style={{alignSelf: 'center',marginVertical: 40, width: 355, height: 74, flexDirection: 'column' }} >
            <View style={{flexDirection: 'row'}} >
                <View >
                    <Text>{highlightedText}</Text>
                </View>
                <View style={{marginLeft: 10}} >
                    <Text>{first}</Text>
                </View>
            </View>
            <View >
                <Text>{second}</Text>
            </View>
        </View >
    );