반응형
플랫리스트에서 react enative native의 모든 항목을 나열하지 않는가?
나는 시차 효과로 반응-원추-기차-두부 npm을 사용해 왔다.시차 안에서는 평면 리스트를 사용해 왔다.
매번 새로운 카테고리 플랫리스트를 추가할 때마다 API에서 가져온 항목을 다시 로드해야 하지만 내 경우에는 모든 항목이 나열되지 않는다.배열의 마지막 두 항목만 표시된다.나의 배열 값은 10개의 항목을 포함하지만 2개의 항목만 표시된다.
플랫리스트에 대한 코드:
const renderContent = (label) => (
<View style={{ backgroundColor: '#FBFCFF', top: -10 }}>
<CategoryListView>
{this.state.categories && <FlatList
horizontal={false}
data={this.state.categories}
contentContainerStyle={{ paddingBottom: 20 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.loadCategories} />
}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={true}
renderItem={({ item }) => { return <CardActivity gotoCategoryDetail={this.gotoCategoryDetail} key={item._id} category={item}></CardActivity> }}
keyExtractor={(item) => item._id}
/>}
</CategoryListView>
</View>
)
다음은 get 카테고리 목록
loadCategories = async () => {
this.setState({ refreshing: true });
let categories = await this.props.getCategories();
console.log(categories)
this.setState({ categories, lastFetchCategoriesTime: new Date() });
};
여기 생성자 코드가 있다.
constructor(props) {
super(props);
this.state = {
categories: [],
refreshing: false,
scrollEnd: false,
}
this.loadCategories();
const { navigation } = this.props;
this.focusListener = navigation.addListener("focus", () => {
// Call ur function here.. or add logic.
console.log(':::this will fire every time Page 1 receives navigation focus:::');
this.loadCategories();
});
};
어떤 도움이라도 고맙게 생각한다.
참조URL: https://stackoverflow.com/questions/69258926/flatlist-does-not-listing-all-items-in-react-native
반응형
'Programing' 카테고리의 다른 글
Python 3에서 웹에서 파일 다운로드 (0) | 2022.03.26 |
---|---|
Vue-Router를 사용하여 Vue에서 URL 쿼리 매개 변수를 설정하는 방법 (0) | 2022.03.26 |
변수 "창"은 반응 네이티브로 무엇을 나타내는가? (0) | 2022.03.26 |
Java "가상 시스템" 대Python "인터프리터" 비유? (0) | 2022.03.26 |
Vuetify 데이터 테이블 날짜 열을 포맷하는 방법? (0) | 2022.03.26 |