#javascript #reactjs #react-native #react-native-flatlist
Вопрос:
У меня есть 10 объектов в массиве, и я создал представление сетки с помощью плоского списка. я хочу реализовать ту логику , что, во-первых ,будут показаны только три объекта, когда мы нажмем «Показать больше», все объекты должны быть видны в списке в виде сетки, и только три элемента могут отображаться в одной строке. как я могу это сделать
lt;FlatList data={item.tag} renderItem={({ item }) =gt; ( lt;View style={{ flex: 1, flexDirection: "column", margin: 1 }}gt; lt;View //key={i} style={{ backgroundColor: "#aaf0d1", borderRadius: 20, borderWidth: 1, padding: "2%", borderColor: "#40e0d0", //height: '20%', width: widthToDp("25%"), //margin: '2%', flex: 1, flexDirection: "column", margin: 1 }} gt; lt;Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}gt; #{item.title} lt;/Textgt; lt;/Viewgt; lt;/Viewgt; )} //Setting the number of column numColumns={3} keyExtractor={(item, index) =gt; index} /gt;; Ответ №1:
Вы можете контролировать, сколько элементов вы визуализируете прямо в своей renderItem функции:
lt;FlatList data={item.tag} renderItem={renderItem} //Setting the number of column numColumns={3} keyExtractor={(item, index) =gt; index} /gt;; ... const [showMore, setShowMore] = useState(false) // we handle the show more state here const onShowMore = () =gt; setShowMore(true) const onShowLess = () =gt; setShowMore(false) const renderItem = ({ item, index }) =gt; { if (showMore) { // we display all items if show more state is true return ( lt;View style={{ flex: 1, flexDirection: "column", margin: 1 }}gt; lt;View //key={i} style={{ backgroundColor: "#aaf0d1", borderRadius: 20, borderWidth: 1, padding: "2%", borderColor: "#40e0d0", //height: '20%', width: widthToDp("25%"), //margin: '2%', flex: 1, flexDirection: "column", margin: 1 }} gt; lt;Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}gt; #{item.title} lt;/Textgt; lt;/Viewgt; lt;/Viewgt; ) } else { if (index lt; 3) { // here we control how many items are displayed if show more is false return ( lt;View style={{ flex: 1, flexDirection: "column", margin: 1 }}gt; lt;View //key={i} style={{ backgroundColor: "#aaf0d1", borderRadius: 20, borderWidth: 1, padding: "2%", borderColor: "#40e0d0", //height: '20%', width: widthToDp("25%"), //margin: '2%', flex: 1, flexDirection: "column", margin: 1 }} gt; lt;Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}gt; #{item.title} lt;/Textgt; lt;/Viewgt; lt;/Viewgt; ) } } }