如何在 react-native 中的多行文本中断后确定 "more" link/button 的位置

Question

我想在 react-native 应用（"more" link 长文本中断后）中实现 instagram 的字幕中断功能，但可以选择确定行的确切字符位置打破放置 "more" link.

例如，如果我在标题中包含以下文字：

事实是疼痛本身非常重要。他们试图让我的足球更加执着。因此，员工之类的人比他们俩都幸运。当我用愤怒推翻他时，我会在两场比赛中理解文明。患难与别，正视余生

并给定 numberOfLines={2}，它在 "more" 之前显示（比方说）一行半文本（不是确切的 2 行）。

Desired view of my example at this stage

Answer 1

我不确定它是否对您有帮助。但这就是我在我的案例中所做的。它对我有用

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  TouchableOpacity,
} from 'react-native';

export default class Myapp extends React.Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      text: '...more' + '\n',
      number: 2,
    };
    this.dl =
      'Lorem ipsum dolor sit amet, putant ancillae voluptaria eos te, eum et justo impetus. Tincidunt efficiendi eu mei, sea at aeque persius. Quo commodo molestie similique eu, pri ei utroque lucilius. Eum cu everti iriure, in duo ludus urbanitas intellegam. Partiendo molestiae et eos, mei wisi cetero recteque ex.sddaefrwtttb tguirdg';
  }

  render() {
    return (
      <View style={styles.container}>
        <Text numberOfLines={this.state.number} ellipsizeMode={'middle'}>
          {this.dl.substr(0, 80)}
          <Text
            onPress={() =>
              this.setState({ number: null, text: this.dl.substr(80) })
            }>
            {this.state.text}
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

它并不完美，但我认为它会给你灵感 Expo Link

Answer 2

实际上有一个用于此目的的库：
react-native-read-more-text

这里是 Github 中的 discussion。基本上这个想法是使用 computeLines 函数来虚拟计算每行的长度。

如何在 react-native 中的多行文本中断后确定 "more" link/button 的位置

How to determine placement of "more" link/button after multiline text break in react-native

react-native

text

caption