반응형

리액트 네이티브 스터디 5

RN Prj - borderRadius, FlatList, SafeAreaView

부동산 등기 두번째 탭 Check List UI 구성 진행 - FlatList 매도인 / 매수인 의 등기 Check List 를 List로 보여주려면 ScrollView 와 FlatList 정도 쓰면 될 것 같은데 아래 내용을 보면, ScrollView는 all rendering 인데 반해 flatlist 는 default 10개씩 mount 하기 때문에 memory 및 processing time 을 줄일수 있다고 합니다. (사실 수백개 list 가 넘어가야지 flatList 가 유용 하다고 함) Flat List 예제 코드는 아래 활용. https://reactnative.dev/docs/flatlist React Native · A framework for building native apps us..

RN Prj - Style, Layout 구성

오늘은 Calculator Tab 내 Layout 구성 Core Component 의 View, TextInput 등 사용해보기 text-style-props CustomPicker Function 활용 참고 https://reactnative.dev/docs/text-style-props React Native · A framework for building native apps using React A framework for building native apps using React reactnative.dev Style 다양하게 변경 해보고, Layout 구성하기 flexDirection : 'column' - vertical, 'row' - horizontal alignItems : flex-s..

RN Prj - js file split, bottomNavigation style, Webview

3일차에 이어 4일차 진행 - tab 별로 file 분리 file 구성은 tab 별로 4개 js 파일 새로 추가, 그리고 모두 stackNavigator 적용 Calculator tab만 stack 이동이 필요하므로, 사실 첫번째 탭만 stackNavigator 가 필요한데 다른 탭도 상단 ActionBar 통일성 유지하기 위해 모두 적용. (나중에 ActionBar control 가능해지면 빼자) - bottom navigation style 및 icon 변경 Material Design Icons 에서 가져다 쓸 수 있습니다. 지난주에 Nomad Coder 유투버가 날씨앱 속성으로 만들 때도 여기를 활용했던 것 같네요~ https://cdn.materialdesignicons.com/5.0.45/ M..

RN Prj - 스타벅스 Expo 안되는 문제

지난 번에 스타벅스에서 Expo app run이 되다 안되다 했던 것 같아서 이상했는데 오늘 다시 해보니, 스타벅스 wifi 로는 LAN 연결이 안되고있고 Tunnel로 잡으니 app 이 정상적으로 run 되는것을 확인. 잠시 되었다가 다시 연결이 끊어졌는데, 결론부터 얘기하면 스타벅스 같은 public wifi는 expo 활용이 어렵습니다. 이후부터는 모바일 핫스팟으로 엑스포 사용. $ expo init projectName $ cd projectName $ npm install @react-navigation/native $ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native..

RN Prj - React Navigation

- 어제 스타벅스 조명이 약해 책읽다가 눈이 금방 피로해져서 오늘은 등 있는 동네 커피숍으로 마실 왔네요 ㅋㅋ - 어제는 React Native API Core Component 들을 따라해봤고, 오늘은 React Navigation 을 만들어보겠습니다 https://reactnavigation.org/docs/navigating React Navigation In the previous section, ["Hello React Navigation"](hello-react-navigation.md), we defined a stack navigator with two routes (`Home` and `Details`), but we didn't learn how to let a user navigate..

반응형