Как выделить текст построчно в React Native

Я хочу выделить текст в моем приложении React Native. Я использую компонент Text React Native для отображения текста, и я могу дать ему backgroundColor, но то, что я действительно выделяю, как у вас, есть на следующем изображении:

Как выделить текст построчно в React Native

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
841
1

Ответы 1

Вы можете использовать для этого библиотеку реагировать родной-выделить-слова.

Вот пример:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Highlighter from 'react-native-highlight-words';

export default class Example extends Component {
  render() {
    return (
      <View style = {{alignItems: 'center', paddingTop: 300}}>
        <Highlighter
          highlightStyle = {{backgroundColor: 'greenyellow'}}
          searchWords = {["Swine Flu is an infection caused by"]}
          textToHighlight = "Swine Flu is an infection caused by..."
        />
        <Highlighter
          highlightStyle = {{backgroundColor: 'lightblue'}}
          searchWords = {["swine flu"]}
          textToHighlight = "The risk of swine flu..."
        />
      </View>
    );
  }
}

Другие вопросы по теме