코딩일기/React-Native15 [ReactNative 공부] ScrollView child layout height 적용 ScrollView child layout height 적용 ScrollView의 child layout 의 height 같은 경우는 퍼센티지로 크기를 정하면 ScrollView의 전체 크기에서 height 구하는것이 아니라 ScrollView child의 총 height에서 퍼센티지를 구해 height를 결정한다. 소스를 통해서 설명을 해주겠다. return ( 아 아 navigation.navigate('CafeReviewWrite')} /> navigation.navigate('CafeReviewList')} /> ); const styles = StyleSheet.create({ scrollViewContainer : { height: '100%', borderColor : 'green', bor.. 2021. 5. 18. [ReactNative 공부] Demensions 사용 Demensions 이건 해당 기기의 픽셀수를 직접 가져와서 대응하는것이다. 그래서 이걸 사용하여서 반응형으로 만들수가 있다. 이것의 사용법은 아래와 같다. 일단 import 를 해와야 한다. import { Button, View, Text,Image,TouchableOpacity,ScrollView, StyleSheet,SafeAreaView, Dimensions } from 'react-native'; 그렇게 하고 나면 이제 Dimensions를 쓸수가 있다. 사용법은 아래와 같다. Dimensions.get('window').height/3 이건 height를 사용한건데 width를 사용하고 싶음 width를 적으면 된다. /3 을 하게 되면 기기 화면에서의 30%된다. ※get()의 매개변수로 .. 2021. 5. 18. [ReactNative 공부] SafeAreaView 란 SafeAreaView 아이폰에서 notch 디자인으로 나오면서 위에 header랑 밑에 바닥까지 나오게 되면서 문제가 생긴다. ex) 위처럼 못생겨지는데 이를 해결하기 위해서 있는게 SafeAreaView라는것이다. 해당 태그를 쓰면 아래처럼 깔끔해진다. ex) 참조 링크 : https://velog.io/@7p3m1k/react-native-태그SafeAreaView [react-native 태그]SafeAreaView 요즘 노치 디자인으로 핸드폰이 나와서 위와 같이 영역을 침범하는 경우가 있다이걸 해결하는 방법으로 SafeAreaView가 있다방법은 간단하다 view태그 대신 SafeAreaView 태그를 사용하면 된다.물론 impo velog.io 2021. 5. 18. [ReactNative 공부] ScrollView와 Flatlist 이번엔 내가 ScrollView와 Flatlist에 대해서 알아보려고 한다. ScrollView ScrollView는 해당 뷰 안에 있는 모든 아이템들을 한꺼번에 렌더링을 한다. 그래서 ScrollView는 안의 데이터가 적을때만 사용해야만 한다. 왜냐하면 모든것을 한번에 렌더링을 하기 때문에 데이터들을 렌더링 하는것이 스크롤 하는것의 속도를 따라가지 못해 흰색 화면이 보여지게 된다. FlatList FlatList는 한꺼번에 렌더링을 하지 않고 설정한 갯수 만큼만 화면에 보여지게하고 그 이상은 스크롤이 따로 더 내려갈때 렌더링을 하게 해서 렌더링의 효율을 높일수가 있다. 일단은 난 ScrollView를 통해서 만들예정이다. 근데 지금 내가 겪고 있는 문제는 이렇게 만들고 ScrollView 안에 있는 .. 2021. 5. 18. 이전 1 2 3 4 다음
