Question

我想在一个本机应用程序中实现instagram的字幕中断功能（长文本中断后为“更多”链接），但可以选择确定换行符的确切字符位置以放置“更多”链接。 >

例如，如果我的标题中包含以下文本：

腹泻，坐骨an膏，刺激和促进作用。 Tincidunt efficiendi eu mei，海上人迹罕至。 Qu commodo molestie similique eu，pri ei utroque lucilius。 Eum cu everti iriure，位于dut ludus urbanitas intellegam。 Partiendo molestiae et eos，mei wisi cetero recteque ex。

并给定numberOfLines={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中多行文本中断后，如何确定“更多”链接/按钮的位置

2 个答案: