NumberOfLines в FlatList - React Native - PullRequest
Новая
       25

NumberOfLines в FlatList - React Native

0 голосов
/ 06 мая 2020

У меня есть собственное приложение с простым FlatList и TextInput. Когда я ищу любой текст, он выделяется в списке, как показано ниже:

Теперь я установил «numberOfLines = 3» (согласно нашему требованию), и теперь это выглядит так:

Требование это должно выглядеть примерно так, как показано ниже. (пожалуйста, не обращайте внимания на мой снимок экрана WhatsApp) Он отображает выделенный текст в этих 3 строках с помощью «...».

enter image description here

Я отображение данных с помощью следующего кода 

<Text numberOfLines={3} style={[subTitle,{fontSize:normalizeFontSize(14),lineHeight:normalizeLineHeight(14)}]}>

{getHighlightedText(alert)}

</Text>

функция выделения: 

getHighlightedText = text => {
    //search text user inputs
    const {value} = this.props;
    if (value == "" || value == null || value == 0) {
        return <Text> {text} </Text>
    } else {
        // split the search value
        const words = value.split(/\s+/g).filter(word => word.length);
        // join if search value has more than 1 word
        const pattern = words.join('|');
        const re = new RegExp(pattern, 'gi')
        const children = [];

        let before, highlighted, match, pos = 0;
        // match using RegExp with my text
        const matches = text.match(re);

        if (matches != null) {
            // loop all the matches
            for (match of matches) {
                match = re.exec(text)
                if (pos < match.index) {
                    // before has all the text before the word that has to highlighted
                    before = text.substring(pos, match.index);
                    if (before.length) {
                        children.push(before)
                    }
                }
                highlighted = <Text style={{backgroundColor: 'coral'}}>{match[0]} </Text>
                // text is highlighted
                children.push(highlighted);

                pos = match.index + match[0].length;
            }
        }
        if (pos < text.length) {
            // text after the highlighted part
            const last = text.substring(pos);
            children.push(last);
        }
        // children array will have the entire text
        return <Text>{children} </Text>
    }
}

Нужна помощь от гуру React Native по этому поводу. Пожалуйста, будьте добры, я новичок в React Native :)

...