Question

我正在尝试在潜水中为长文本实现点击功能。如果任何长文本超过2行，则文本将被截断，并在末尾加上省略号。因此，我想实现onclick功能以扩展长文本。为此，我想在省略号后面插入一个文本，该文本表示“查看更多”，它会扩展div，单击后，“查看更多”将变为“查看更少”，并且文本停留在消息末尾。

这是当前代码。只是提供一个简单的代码以获得一个快速的想法

// return content
<ListItem>

<View>{this._displayMessage()}</View>

</ListItem>


// 
private _displayMessage() {
return (
<View>
    <FlexibleText truncatedlines=2 >
        {"this is the long message to be displayed"}
        {this._isLongMessage() ? (
            <Text
                onClick={this.toggleExpandMessage}
                style={this.props.expandTextStyle}>
                {this.state.messageExpanded ? "See Less" : "See More"}
            </Text>
        ) : null}
    </FlexibleText>

</View>
);
}

使用上面的代码，只有可见的文本是可见的，因为它被编写为仅在扩展消息之后才显示。 See more仍在div中，但不可见，因为它被放置在当前被截断且在可用div容器之外的整个消息之后。

我尝试将displayMessage方法之后的see少见多文本标签移动到列表项中的返回内容。但这不是我想要的设计。

This is how i want the behavior - Image 1

This is the current behavior - Image 2

对于on-click事件，我通过将总行从2截断为undefined来切换div的大小。因此，我正在尝试一种方法，可以将See more文本放置在图像1中，而不是在图片2中

在消息内容div之间使用链接

0 个答案: