react native spannableText 특정 텍스트에 색칠하기..

구글링 해보니까 모듈 있던데

 

이런 단순한 기능 쓰려고 모듈 다운받는건 내키지 않아서

 

직접 만들었다.

 

 

spannableText.mp4

2.67MB

저번에 안드로이드 네이티브에서도 만들었었는데...

 

 

js로 react native에서 또 만드네.....

 

코드 전문 하단..

 

파라미터 값으려 

 

전체 텍스트와 색칠할 텍스트를 받는다. 

 

 

 

 

 

import React from 'react';

import { Text } from 'react-native';

import PropTypes from 'prop-types';

 

export default SpannableText = ({ fullText, piece }) => {

let text = fullText;

let cText = piece;

let textLength = cText.length;

 

let view = [];

let succecePoint = [];

let textList = [];

for (let i=0; i<text.length; i++) {

if (text.substring(i,i+textLength) === cText) {

succecePoint.push(i);

}

}

 

for (let i=0; i<text.length; i++) {

let booll = false;

for (let j=0; j<succecePoint.length; j++) {

 

if (getIsColor(i,succecePoint[j],textLength)) {

booll = true;

console.log(i + ' / ' + j);

break;

} else {

booll = false;

}

}

textList.push(new textRule(text.charAt(i),booll));

}

 

for (let i=0; i<textList.length; i++) {

view.push(textOne(textList[i]));

}

return(

<>

{view}

</>

)

}

 

function getIsColor(i, j, textLength) {

for (let k=0; k<textLength; k++) {

if (i === j + k) {

return true;

} else {

booll = false;

}

}

}

 

function textOne(textList) {

let color = textList.booll ? '#ff0000' : '#000000'

return (

<Text style={{color}}>{textList.char}</Text>

)

}

 

function textRule(char, booll) {

this.char = char;

this.booll = booll;

}

 

SpannableText.propTypes = {

fullText: PropTypes.string,

piece: PropTypes.string,

}