Issue with rendering a list of elements in React Native FlatList or using the array mapping method.
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
Description
Hi,
I’m encountering an issue with the FlatList in React Native (or when using the array mapping method). The rendered items are stacking on top of the previous ones. Below is the code I'm working with. Could you please help me resolve this behavior?
Thank you!
Steps to reproduce
`import { useState } from 'react';
import {
Text,
SafeAreaView,
StyleSheet,
FlatList,
View,
TouchableOpacity,
} from 'react-native';
export default function App() {
const [showOptions, setShowOptions] = useState(false);
const [activeCard, setActiveCard] = useState(null);
return (
<FlatList
data={[0, 1, 2, 3, 4, 5]}
renderItem={({ item, index }) => (
<TouchableOpacity
style={styles.button}
onPress={() => {
setShowOptions(true);
setActiveCard(index);
}}
>
Click me
{showOptions && activeCard === index && (
)}
)}
ItemSeparatorComponent={() => }
contentContainerStyle={styles.listContent}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
card: {
height: 100,
width: '100%',
backgroundColor: 'green',
borderRadius: 8,
position: 'relative',
},
button: {
position: 'absolute',
bottom: 10,
right: 10,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
optionsContainer: {
backgroundColor: 'yellow',
borderRadius: 8,
height: 80,
width: '50%',
position: 'absolute',
top: 80,
},
separator: {
height: 20,
},
listContent: {
padding: 20,
paddingBottom: 100,
},
});
`
This is the code
React Native Version
0.73.0
Affected Platforms
Runtime - Android, Runtime - iOS, Runtime - Web
Output of npx react-native info
NA
Stacktrace or Logs
NA
Reproducer
https://snack.expo.dev/nGlFBl-YeXppULXrGhsy9
Screenshots and Videos
https://github.com/user-attachments/assets/141325b0-1851-4067-8328-ce2b5a5f26d8
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với reproducer Snack được liên kết và component App được cung cấp, tập trung vào FlatList, các style của card và optionsContainer, cũng như state điều khiển card đang hoạt động. So sánh hành vi trên các nền tảng Android, iOS và Web được liệt kê; hoàn tất khi xác định được một vấn đề React Native có thể tái hiện và xác nhận phạm vi của vấn đề đó, hoặc ghi lại rằng vấn đề do mã ví dụ gây ra.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, react-native
- Lĩnh vực
- mobile-dev
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 25/100