首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >FlatList - React本机中的NumberOfLines

FlatList - React本机中的NumberOfLines
EN

Stack Overflow用户
提问于 2020-05-06 17:42:37
回答 1查看 147关注 0票数 0

我有一个简单的FlatList和TextInput的本地应用程序。当我搜索任何文本时,它会在列表中突出显示,如下所示:

现在我设置了"numberOfLines = 3“(根据我们的要求),现在看起来像这样:

它的要求是看起来像下面这样。(请不要在意它的my WhatsApp屏幕截图)它会在这3行中用"...“显示突出显示的文本。

我使用以下代码显示数据

代码语言:javascript
复制
<Text numberOfLines={3} style={[subTitle,{fontSize:normalizeFontSize(14),lineHeight:normalizeLineHeight(14)}]}>

{getHighlightedText(alert)}

</Text>

突出显示功能:

代码语言:javascript
复制
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 gurus的帮助。请好心,我是新来的React Native :)

EN

回答 1

Stack Overflow用户

发布于 2020-11-16 00:14:18

React Native的<Text>在嵌套的<Text>对象中有一个带有numberOfLinesknown issue

这可能就是导致您问题的原因:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61632011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档