在React Native中,如何實現(xiàn)一個自適應高度的列表? react-native-scrollable-tab-view
Netshoes鞋履達人跨境問答2025-08-179330
在React Native中,可以使用FlatList
組件來實現(xiàn)一個自適應高度的列表。以下是一個示例:
import React, { useState } from 'react';
import { FlatList, View } from 'react-native';
const App = () => {
const [data, setData] = useState([]);
const renderItem = ({ item }) => (
<View style={{ height: 100 }}>
<Text style={{ fontSize: 20, margin: 5 }}>{item.name}</Text>
</View>
);
return (
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
onEndReached={() => console.log('End reached')}
/>
);
};
export default App;
在這個示例中,我們首先導入了useState
和FlatList
組件。然后,我們定義了一個名為App
的組件,并在其中使用useState
創(chuàng)建了一個名為data
的狀態(tài)變量。接下來,我們定義了一個名為renderItem
的函數(shù),該函數(shù)接收一個item
參數(shù),并返回一個包含文本和一個固定高度的視圖。最后,我們使用FlatList
組件將數(shù)據(jù)渲染到屏幕上,并使用onEndReached
回調(diào)函數(shù)在列表完全加載后打印一條消息。
本文內(nèi)容根據(jù)網(wǎng)絡資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明,如有侵權,聯(lián)系刪除。