React native определить, когда текст отключен

Я использую native-native с ограниченным числом строк, которые отображаются как "...", используя

<Text numberOfLines={4}> {myText} </Text>

Теперь моя проблема в том, что если текст отключен, я хотел бы показать ему какое-то особое изображение, чтобы перейти к новому представлению. Мне интересно, есть ли свойство, которое я могу использовать для проверки, если текст отключен?

Ответ 1

Сейчас для этого нет собственности (к сожалению).

Здесь есть запрос функции: https://github.com/facebook/react-native/issues/2496 (также несколько советов о том, как вы могли бы заставить его работать, но ссылки на реализацию недоступны).

Вы могли бы измерить пространство, занимаемое определенным количеством строк, а затем обработать его самостоятельно? Но не идеал.

Ответ 2

Компонент Text имеет событие onPress, которое можно обрабатывать для перехода к другой сцене. Чтобы включить навигацию, компонент, содержащий текст, должен быть помещен в компонент NavigationIOS. Текстовый компонент также имеет свойство ellipsizeMode, которое помещает "..." в хвост.

<Text 
  numberOfLines={4}
  ellipsizeMode="tail"
  onPress={(e) => this.props.navigator.push({component: Detail})}
>
  {myText}
</Text>

Ответ 3

Модуль Reaction-native-read-more-text предоставляет готовое решение этой проблемы:

export class DescriptionCard extends React.Component {
  render() {
    let { text } = this.props;

    return (
      <View>
        <View style={styles.cardLabel}>
          <BoldText style={styles.cardLabelText}>
            Description
          </BoldText>
        </View>

        <View style={styles.card}>
          <View style={styles.cardBody}>
            <ReadMore
              numberOfLines={3}
              renderTruncatedFooter={this._renderTruncatedFooter}
              renderRevealedFooter={this._renderRevealedFooter}
              onReady={this._handleTextReady}>
              <RegularText style={styles.cardText}>
                {text}
              </RegularText>
            </ReadMore>
          </View>
        </View>
      </View>
    );
  }

  _renderTruncatedFooter = (handlePress) => {
    return (
      <RegularText style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
        Read more
      </RegularText>
    );
  }

  _renderRevealedFooter = (handlePress) => {
    return (
      <RegularText style={{color: Colors.tintColor, marginTop: 5}} onPress={handlePress}>
        Show less
      </RegularText>
    );
  }

  _handleTextReady = () => {
    // ...
  }
}