React native 如何确定“的位置”；“更多”；react native中多行文本中断后的链接/按钮

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

例如，如果标题中有以下文本：

Lorem ipsum dolor sit amet，已知的上唇盘状副唇，eum et justo推动力。在埃克佩西乌斯的海上。这是一个类似欧盟的共同分子，也是乌特罗克卢西利乌斯的主要成员。Eum cu everti iriure，位于多个智能城市中。部分分子和eos，我希望是正确的

给定

numberOfLines={2}

，它在“more”（不是确切的2行）之前显示（比如）一行半的文本

---

我不知道这对你有没有帮助。但这就是我在我的案件中所做的。这对我很有效

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

import*as React from'React'；
进口{
文本，
看法
样式表，
文本输入，
可触摸不透明度，
}从“反应本机”；
导出默认类Myapp扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“…更多”+“\n”，
编号：2，
};
这个是.dl=
“Lorem ipsum dolor sit amet，公认的辅助设备voluptaria eos te，eum et justo motion.在波斯湾的海上，效率很高。现在，类似的普通分子，在utroque lucilius之前。eum cu everti iriure，在两个城市的内部。部分内分子和eos，我希望在SDDAEFRWTTB tguirdg中直面”；
}
render（）{
返回(
{this.dl.substr（0,80）}
this.setState（{number:null，text:this.dl.substr（80）}）
}>
{this.state.text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
填充：8，
},
第段：{
差额：24，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
});

它并不完美，但我认为它会给你一个想法

---

我不知道这对你有没有帮助。但这就是我在我的案件中所做的。这对我很有效

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

import*as React from'React'；
进口{
文本，
看法
样式表，
文本输入，
可触摸不透明度，
}从“反应本机”；
导出默认类Myapp扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
文本：“…更多”+“\n”，
编号：2，
};
这个是.dl=
“Lorem ipsum dolor sit amet，公认的辅助设备voluptaria eos te，eum et justo motion.在波斯湾的海上，效率很高。现在，类似的普通分子，在utroque lucilius之前。eum cu everti iriure，在两个城市的内部。部分内分子和eos，我希望在SDDAEFRWTTB tguirdg中直面”；
}
render（）{
返回(
{this.dl.substr（0,80）}
this.setState（{number:null，text:this.dl.substr（80）}）
}>
{this.state.text}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
填充：8，
},
第段：{
差额：24，
尺码：18，
fontWeight:'粗体'，
textAlign:'中心'，
},
});

它并不完美，但我认为它会给你一个想法

---

实际上有一个用于此目的的库：

---

这是Github中的。基本上，这个想法是使用

computeLines

函数来虚拟计算每一行的长度。

实际上有一个用于此目的的库：

这是Github中的。其基本思想是使用

computeLines

函数来虚拟计算每行的长度