[英]NumberOfLines in FlatList - React Native
我有一個帶有簡單 FlatList 和 TextInput 的本機應用程序。 當我搜索任何文本時,它會在列表中突出顯示,如下所示:
現在我設置“numberOfLines = 3”(根據我們的要求),現在看起來像這樣:
要求是它看起來像下面這樣。 (請不要介意我的 WhatsApp 截圖)它在這 3 行中用“...”顯示突出顯示的文本。
我正在使用以下代碼顯示數據
<Text numberOfLines={3} style={[subTitle,{fontSize:normalizeFontSize(14),lineHeight:normalizeLineHeight(14)}]}>
{getHighlightedText(alert)}
</Text>
突出顯示 function:
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 的新手:)
React Native 的<Text>
在嵌套<Text>
對象中存在numberOfLines
的已知問題。
這可能是導致您的問題的原因:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.