개발자
현재 React Native로 개인 프로젝트 구현중에 특정 영역을 Scroll Y위치에 맞춰서 position absolute를 띄워 z-index를 높여 보여주게 만들었으나 FlatList scrollbar까지 가려서 UX상 좋지 않은 경험을 보여주어 이부분을 수정하기 위해 여러 서치를 하였으나 아직 방법을 찾지 못하였습니다.. 혹시 선배님들께서 관련하여 해결한 사례가 있는지 공유 부탁드립니다!
답변 1
React Native의 FlatList의 스크롤바를 따로 z-index를 조절하는 것은 직접적으로 구현할 수 없습니다. 그러나 대안으로 사용할 수 있는 방법이 있습니다. React Native에서 스크롤바의 모양이나 위치를 변경할 수 있는 ScrollView 컴포넌트를 사용해보실 수 있습니다. ScrollView 컴포넌트를 사용하면 아래와 같이 스크롤바를 커스터마이징 할 수 있습니다: 이 예제에서는 ScrollView 컴포넌트를 사용하여 스크롤바를 가린 다음, ' customScrollbar ' 스타일로 새로운 스크롤바를 만들었습니다. 이렇게 하면 원하는 z-index로 스크롤바를 조절할 수 있습니다. 물론 이렇게 구현하면 FlatList의 성능이 떨어질 수 있으므로, 데이터가 많거나 동적으로 로딩되는 경우에는 VirtualizedList 또는 SectionList와 같은 다른 컴포넌트를 사용해야 할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
import React from 'react'; import { ScrollView, StyleSheet, View } from 'react-native'; const CustomScrollbar = () => { return ( <ScrollView style={styles.container} showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainer} > <View style={styles.content} /> <View style={styles.customScrollbar} /> </ScrollView> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { padding: 10, }, content: { height: 2000, }, customScrollbar: { position: 'absolute', right: 10, top: 0, bottom: 0, width: 4, backgroundColor: 'blue', borderRadius: 2, }, }); export default CustomScrollbar;
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!