Блог

Я хочу реализовать функцию разбиения подписи instagram в приложении react-native (ссылка «еще» после длинного текстового разрыва), но с возможностью определения точной позиции символа разрыва строки для размещения ссылки «еще».

Например, если у меня есть следующий текст в заголовке:

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.

и, учитывая numberOfLines={2} , он отображает (скажем) полторы строки текста перед «еще» (не точные 2 строки).

Желаемый вид моего примера на данном этапе

На самом деле для этой цели существует библиотека:
react-native-подробнее-текст

Вот обсуждение в Github. По сути, идея состоит в том, чтобы использовать computeLines функцию для виртуального вычисления длины каждой строки.

Я точно не знаю, поможет вам это или нет. Но это то, что я сделал в моем случае. И это сработало для меня

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

 

Это не идеально, но я думаю, что это даст вам представление
Ссылка на выставку