Как определить расположение «дополнительной» ссылки / кнопки после разрыва многострочного текста в реагирующем - PullRequest
Новая
       23

Как определить расположение «дополнительной» ссылки / кнопки после разрыва многострочного текста в реагирующем

1 голос
/ 14 апреля 2019

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

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

Lorem ipsum dolor sit amet, putant ancillae coeptaria eos te, eum et justo impetus.Tincidunt efficiendi eu mei, море в древнем Персии.Quo Commodo Molestie Similique Eu, Pri Ei Utroque Lucilius.Eum cu everti iriure, в дуэте ludus urbanitas intellegam.Partiendo molestiae et eos, mei wisi cetero recteque ex.

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

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

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

На самом деле для этого есть библиотека:
реагировать-родной-читать-больше-текста

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

0 голосов
/ 14 апреля 2019

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

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

...