Android22 [Kotlin] 레이아웃 테두리 및 모서리 설정 전체 테두리를 주는 방법은 간단하다. drawable > new > Drawable Resource File로 파일을 하나 만든다. 이때 Root element는 shape으로 바꿔줘도 되고 나중에 코드에서 바꿔줘도 된다. 테두리 설정하기 stroke로 테두리를 추가해줄 수 있고 width로 두께, color로 색깔을 지정해줄 수 있다. 모서리 둥글게 만들기 모서리는 corners를 이용해 둥글게 만들 수 있고 radius로 둥글기의 정도를 정할 수 있다. 배경색 변경하기 solid를 이용하여 배경색을 변경할 수 있고 color로 색상을 정할 수 있다. 레이아웃에 적용하기 이제 위에서 만든 파일을 layout에 적용해보자. LinearLayout으로 예를 들어보자. 아래와 같이 background에 넣어.. 2023. 1. 26. [React-Native] Tob Tabs Navigation 사용하기 모듈 설치 아래에서 없는 모듈만 깔아주자. npm install @react-navigation/native npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view 사용방법 사용방법은 Stack 및 Bottom Navigation과 동일하기에 이미 navigation을 구현해봤다면 간단할 것이다. Tab.Screen에서 name은 화면의 별명, component은 화면을 구현하고 있는 컴포넌트 의미한다. 코드에 나와있는 3개의 화면은 따로 화면을 구현한 후 가져오기만 하면 된다. import { createMaterialTopTabNavigator } from '@react-navigation.. 2022. 10. 29. [React-Native] Hook 오늘 React-Native를 사용함에 있어서 중요한 Hook에 대해 알아보자. Hook의 종류는 많지만 아래 5가지 정도만 알아도 충분하다고 생각한다. 1. useState 2. useEffect 3. useCallback 4. useMemo 5. useRef 리랜더링 조건 Hook은 랜더링과 밀접한 관련이 있으므로 리랜더링 되는 조건을 알고 있는 편이 좋다. 자신의 state가 변경될 때 부모 컴포넌트로부터 받은 props가 변경될 때 부모 컴포넌트가 리렌더링될 때 1. UseState 생명주기와 밀접한 연관이 있는 요소, 렌더링과 관련있는 값을 저장하기 좋다 const [state, setState] = useState(initialState); setState(newState); useState로.. 2022. 10. 27. [React-Native] Drawer Navigation Custom 하기 2022.10.25 - [Android/React-Native] - [React-Native] Drawer Navigation [React-Native] Drawer Navigation 모듈 설치 npm install @react-navigation/drawer @react-navigation/native babel.config.js 파일에 아래 코드 추가 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react.. hyemzzi.tistory.com Drawer Navigation을 만드는 건 이전 글을 참고해주세요! Drawer를 커스텀하는 것은 간단하다. 우선 원하는 디자인대로 코드를 짠다. Dra.. 2022. 10. 26. [React-Native] Drawer Navigation 모듈 설치 npm install @react-navigation/drawer @react-navigation/native babel.config.js 파일에 아래 코드 추가 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'] //추가 }; 코드 적용하기 위해 아래 코드 한 번 실행 npm start -- --reset-cache 사용방법 createDrawerNavigator를 사용하여 Drawer를 선언해준 뒤 아래처럼 코드를 짜서 사용할 수 있다. Screen 안에 들어가있는 name은 해당 화면의 별명이고 이 별명을 통해 화면을 왔다갔다 할 수 .. 2022. 10. 25. [React-Native] Stack과 Tab Navigation 같이 쓰기 2022.10.17 - [Android/React-Native] - [React-Native] Bottom Navigation [React-Native] Bottom Navigation 설치해야하는 모듈 npm install @react-navigation/native npm install @react-navigation/bottom-tabs 모듈 추가 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {NavigationC.. hyemzzi.tistory.com 2022.10.20 - [Android/React-Native] - [React-Native] Stack Navigation [React-Native] .. 2022. 10. 22. 이전 1 2 3 4 다음
