我想一次渲染我的 10 個專案，如果有額外的專案，那么下面應該顯示更多按鈕，如果用戶點擊它，那么應該再顯示 10 個，依此類推。我有屬性告訴我是否有下一頁的專案，如果它為空，則不應顯示顯示更多按鈕。我不知道該怎么做。我是本地人的新手，如果有人幫助我擺脫這種情況，我將非常感激。
uj5u.com熱心網友回復：
//This code will display show more button only if shouldBeDisplayed is true .shouldBeDisplayed is the prop which tell whether to show 10 more or not
return {
<View>
{shouldBeDisplayed && <Button>show more</Button>}
</View>
}
uj5u.com熱心網友回復：
這會有幫助嗎？
import React, { useEffect, useState } from 'react';
import { Button, Text, View, } from 'react-native';
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
export default function App() {
const [isMore, setIsMore] = useState(false);
const [showingItems, setShowingItems] = useState([]);
useEffect(() => {
setShowingItems([...items.slice(0, 10)]);
if (items.length >= 10) {
setIsMore(true);
}
}, []);
const handleMore = () => {
setShowingItems(items.slice(0, showingItems.length 10))
if (showingItems.length 10 > items.length) {
setIsMore(false);
}
}
return (
<View>
{showingItems.map((x) => (
<Text key={x}>{x}</Text>
))}
{isMore && <Button title="More..." onPress={handleMore} />}
</View>
);
};
我在沒有該屬性的情況下創建了上述內容。如果你需要添加它，你可以這樣做
useEffect(() => {
setShowingItems([...items.slice(0, 10)]);
setIsMore(yourProperty);
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/327709.html
標籤：反应原生
上一篇：反應原生滾動視圖根本不滾動