1

Я только пробую React native(да и вообще React) но обшарил всю документацию, возможно что то пропустил и не совсем понимаю как это сделать.

Есть обычное приложение. Текст подставляется из переменной(вообще приходит с апи)

import React from "react";
import {  StyleSheet, Text, View } from 'react-native';


const text = "Но повышение уровня гражданского сознания является качественно новой ступенью инновационных методов " +
    "управления процессами. Следует отметить, что понимание сути ресурсосберегающих технологий говорит о возможностях " +
    "соответствующих условий активизации. Повседневная практика показывает, что сплочённость команды профессионалов " +
    "способствует повышению качества системы массового участия."

const App = ({ }) => {

  return (
      <View style={styles.container}>
        <Text>{text}</Text>
      </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App

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

--- Добавил --- Мне нужно выделить текст, чтобы получить что то типо такого, только из переменной

const App = ({ }) => {

        return (
            <View style={styles.container}>
                <Text>Но повышение уровня <SmartText>гражданского</SmartText> сознания является качественно <SmartText>новой</SmartText> ступенью инновационных методов " +
                    "управления процессами. Следует отметить, что понимание <SmartText>сути</SmartText> ресурсосберегающих технологий говорит о возможностях " +
                    "соответствующих условий <SmartText>активизации.</SmartText> Повседневная практика показывает, что сплочённость команды профессионалов " +
                    "способствует повышению качества системы массового участия.</Text>
            </View>
        )
    }

Чтоб я потом смог добавить выделения для слов которые в компоненте по типу примеров https://codepen.io/cbracco/pen/kNMqmJ (только естественно по тапу) или такого https://codepen.io/kshoufer/pen/yLdLPX

10
  • Вам нужно выделить слово или находить? Уточните, пж.
    – Randall
    25 мая 2022 в 20:01
  • @Избытоксусликов я добавил описание, надеюсь так более понятно объяснил что мне нужно сделать 26 мая 2022 в 19:26
  • Все еще непонятно. Если хотите обычное выделение как в хроме, то могу написать.
    – Randall
    26 мая 2022 в 19:42
  • @Избытоксусликов Возможно я не совсем ясно изъясняюсь из недостатка опыта( Можно обычное выделение, тут без разницы, я потом сам допишу стили которые мне нужны, но самое основное это нужно взять определенные слова из переменной (из всего текста точнее из строки) и обернуть их в компонент, к которому я добавлю отдельные стили 26 мая 2022 в 19:51
  • я с апи могу присылать их как угодно с чем угодно, и даже завернутые в компонент, но здесь так не работает интересно как это у Вас получается(то что апи пришлет текст обернутый в теги - еще ни чего не гарантирует), но в любом случае мысль правильная, просто проходите по тексту мапом и оборачиваете нужные слова в нужные компоненты(тэги) 26 мая 2022 в 19:53

3 ответа 3

0

В качестве примера техники приведу код на обычном реакте(решение совсестимо) и снипете(чтобы здесь отобразилось),

Делаем 2 компонента:

  • AllText (для обработки и вывода всего текста)
  • Selected (для стилизации выделения)

Тест разбивается словами и все что между попадает в массив separators (вот пример массива: [ "", " ", "!", ", "], чтобы не мешали знаки разделители а так же другие символы и чтобы они не потерялись после преобразований), позже из этого массива происходит заполнение между словами ( + separators[i+1]).

Сразу оговорюсь - код еще нужно допиливать (в частности возможно регулярки), моя цель была показать решение минимумом кода.

window.Fragment = React.Fragment
window.useState = React.useState
window.useEffect = React.useEffect

// основной код
// массив слов для выделения
const selectedWords = ["это", "этом", "обработать"]
// пример текста
const text = "в этом тесте, который нужно обработать, нужно выделить это и это"

// это компонент выделенного слова
const Selected = ({text}) => <b style={{color: 'red'}}>{text}</b>

// это компонент для всего текста
const AllText = ({text}) => {

  const [separators, setSeparators] = useState([])
  useEffect(()=>{
    // нужно уточнить регулярку 
    setSeparators(text.split(/[А-яё0-9A-z]+/))
  },[])

  return (
    <Fragment>
    {
       text.split(/[^А-яё0-9A-z]+/).map((e, i) => 
         (selectedWords.includes(e)) 
           ? <Selected key={e + i} text={e + separators[i+1]} /> 
           : <Fragment key={e + i}>{ e + separators[i+1]}</Fragment>
       )
    }
    </Fragment>
  )
}  

// тут мы каким либо образом получаем 
// и передаем текст в компонент
const App = () => {
  return (
      <AllText text={text}/> 
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root">

0

Я возможно сделал не самым лучшим образом но спасибо @Daniil Loban за подсказку и ответ) оставлю и свою решение, вдруг кому пригодится

import {StyleSheet, Text} from 'react-native';
import React from "react";

let string = "Во время разработки я собираюсь использовать базу данных SQLite. База данных SQLite являются наиболее удобным выбором для разработки небольших приложений даже очень маленьких, так как каждая база данных хранится в одном файле на диске и нет необходимости запускать сервер базы данных, как MySQL и PostgreSQL."


const TestOutput = () => {
    // Создаю переменную для перебора
    let i = 0
    // Разбиваю строку на массив
    let array = string.split(' ');
    
    const map = Array.prototype.map
    // Здесь я перебираю массив и использую переменную i для индекса (не совсем понял как забирать индексы если они есть)
    const newName = map.call(array, eachLetter => {
        i++
        // Если элемент НЕ 10 по списку то добавляю пробел и возвращаю в массив
        if (i % 10 !== 0) {
            return `${eachLetter} `
        // А вот здесь беру каждый 10 элемент массива и добавляю пробел и красный цвет    
        }else{
            return <Text style={styles.red}>{eachLetter} </Text>
        }
    })

    return (
        <Text>{newName}</Text>
    )
}

const styles = StyleSheet.create({
    red: {
        color: '#ff0000'
    },
});

export default TestOutput
2
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 26 мая 2022 в 21:50
  • @aleksandrbarakin объяснил что смог) 26 мая 2022 в 22:06
0

Создаём компонент InlineText.jsx:

import React, { Fragment } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function InlineText({ list, styleContainer }) {
  return (
    <View style={[styles.container, styleContainer]}>
      {list.map((stringWrapper, idx) => {
        const arr = stringWrapper.string.split(' ');
        return (
          <Fragment key={new Date().getTime() + idx}>
            {arr.map((word, idx) => (
              <Text key={word + idx} style={stringWrapper.style}>
                {word}
              </Text>
            ))}
          </Fragment>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

И вызываем его в вашем коде:

<InlineText
  list={[
    {
      string: 'Первая текстовая строка, ',
      style: {
        fontSize: 16,
        color: '#FF0000',
        marginRight: 5,
      },
    },
    {
      string: 'к первой добавляем вторую строку, ',
      style: {
        fontSize: 16,
        color: '#00FF00',
        marginRight: 5,
      },
    },
    {
      string: 'а ко второй - третью, и так дале - сколько нужно.',
      style: {
        fontSize: 16,
        color: '#0000FF',
        marginRight: 5,
      },
    },
  ]}
  styleContainer={{ marginLeft: 18 }}
/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.