개발(Development)/ReactNative(리액트네이티브)5 [React Native] ScrollView 수평(Horizontal) 스크롤 구현 방법 # 리액트 네이티브에서 Scroll View 수평 스크롤 구현 방법 1. 수평 스크롤 구현 방법 ScrollView 컴포넌트의 `horizontal` 속성을 true로 설정하면 된다. (그냥 속성을 표시만 하면 true가 된다) 2. 스크롤바 감추는 방법 혹시 수평 스크롤바가 생긴다면, `showsHorizontalScrollIndicator`을 false로 설정하여 숨길 수 있다. export function HorizontalScrollView() { return ( {/* ... */} ); } 2024. 1. 14. [리액트 네이티브] Image에 외부URL / 로컬이미지파일 설정 방법 # React Native의 Image 컴포넌트에 외부URL 및 로컬파일 적용 방법 1. 로컬 이미지 파일 적용 방법 source 에 require("상대경로") 메서드 반환값을 세팅해주면 된다. 2. 외부 이미지 URL 적용 방법 source 에 { uri: "외부 이미지 URL" } 객체를 세팅해주면 된다. 2024. 1. 12. [리액트 네이티브] Pressable 이벤트 버블링 막기(stopPropagation) # React Native에서 이벤트 버블링 막는 방법 Pressable 컴포넌트의 onPress 이벤트 핸들러 호출시, 이벤트가 더 이상 전달(이벤트 버블링) 되지 않도록 하려면 콜백함수의 인자로 들어온 event의 event.stopPropagation() 메서드를 호출해주면 된다. event의 Typescript 타입은 GestureResponderEvent 로 세팅해주면 된다. export default function RecipeItem({ recipe }: Props) { const pressButton = (event: GestureResponderEvent) => { event.stopPropagation(); // ... }; return ( {/* ... code ... */} ); } 2024. 1. 12. [리액트 네이티브] Text에 borderRadius 적용 안될 때 해결방법 # React Native 에서 Text에 borderRadius 적용 방법 - 문제 현상 리액트 네이티브에서 Text 컴포넌트에 borderRadius가 적용되지 않는 현상이 있었다. - 해결 방법 Text를 View로 감싸주고, View에 borderRadius 를 적용해주면 된다. export default function RadiusText() { return ( // Text를 View로 감싸준다 카레유 ); } const styles = StyleSheet.create({ // View에 borderRadius 를 적용한다. textContainer: { borderRadius: 30, padding: 20 }, textContent: { fontSize: 12 } }); 2024. 1. 12. [리액트 네이티브] ScrollView에서 flexDirection: row 좌우 수평 정렬 및 flexWrap 줄바꿈 적용 방법 # React Native - ScrollView 좌우배치 및 줄바꿈 적용 방법 - 문제 현상 리액트 네이티브에서 ScrollView의 스타일로 flexDirection: row를 적용해도 내부 요소들이 좌우로 수평 정렬되지 않는 현상이 있었다. - 해결 방법 ScrollView 내부에 중간 View를 만들어 flexDirection: row 를 적용하면, View 내부에 자식 요소들은 수평 정렬이 가능해진다. 줄바꿈까지 적용하려면 중간 View에 flexWrap: wrap 을 적용해주면 된다. export default function ItemList() { const itemList = getItemList(); return ( {/* 중간 컨테이너 View를 넣어줘야 함 */} {itemList.m.. 2024. 1. 12. 이전 1 다음