Tengo 10 objetos en la matriz y he creado la vista de cuadrícula usando una lista plana. quiero implementar esa lógica que, en primer lugar, se mostrarán tres objetos, cuando hacemos clic en mostrar más, todos los objetos deberían estar visibles en la lista en la vista de cuadrícula y solo se pueden mostrar tres elementos en una fila. Cómo puedo hacerlo
<FlatList data={item.tag} renderItem={({ item }) => ( <View style={{ flex: 1, flexDirection: "column", margin: 1 }}> <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 }} > <Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}> #{item.title} </Text> </View> </View> )} //Setting the number of column numColumns={3} keyExtractor={(item, index) => index} />;Puede controlar cuántos elementos renderiza directamente en su función renderItem :
<FlatList data={item.tag} renderItem={renderItem} //Setting the number of column numColumns={3} keyExtractor={(item, index) => index} />; ... const [showMore, setShowMore] = useState(false) // we handle the show more state here const onShowMore = () => setShowMore(true) const onShowLess = () => setShowMore(false) const renderItem = ({ item, index }) => { if (showMore) { // we display all items if show more state is true return ( <View style={{ flex: 1, flexDirection: "column", margin: 1 }}> <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 }} > <Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}> #{item.title} </Text> </View> </View> ) } else { if (index < 3) { // here we control how many items are displayed if show more is false return ( <View style={{ flex: 1, flexDirection: "column", margin: 1 }}> <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 }} > <Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}> #{item.title} </Text> </View> </View> ) } } }