Как определить размещение дополнительной ссылки/кнопки после разрыва многострочного текста в react-native

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

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

Lorem ipsum dolor sit amet, putant ancillae voluptaria eos te, eum et justo impetus. Tincidunt efficiendi eu mei, море и 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 text caption
person elahe ghanbari    schedule 14.04.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

На самом деле для этой цели существует библиотека:
react-native-read- больше текста

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

person Jafar Akhondali    schedule 14.04.2019

arrow_upward
0
arrow_downward

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

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

person Masuk Helal Anik    schedule 14.04.2019