React/React Native20 리액트 네이티브] 16. Image 리액트는 같은 이름에 @2x, @3x를 붙이면 해상도에 따라 x2, x3의 사진을 자동으로 붙인다. 이제 사진을 이용해보자. - ../src/image.js import checkBoxOutline from '../assets/icons/check_box_outline.png' import checkBox from '../assets/icons/check_box.png' import deleteForever from '../assets/icons/delete_forever.png' import edit from '../assets/icons/edit.png' export const images = { uncompleted : checkBoxOutline, complete : checkBox, delete.. 2023. 2. 8. 리액트 네이티브] 15. propTypes 리액트 네이티브는 자바스크립트 기반이기 때문에 자료형 타입을 크게 나누지 않는 문제가 있다. 막상 빌드해놓고 보면 자료형 때문에 오류가 나는 경우도 있고.. 그걸 방지하기 위해 propsType를 쓴다. 그럼 어떻게 쓰는가? 먼저 의존성을 부여한다. npm install props-types 혹은 yarn add prop-types 자료형을 받는 간단한 케이스인 TextInput에 값을 넣는 예시로 알아보자. 루트 App.js 더보기 import App from "./src/App"; export default App; - ../src/App.js import React, { useState } from "react"; import { StatusBar } from "react-native"; impor.. 2023. 2. 1. 리액트 네이티브] 14. Input의 속성 TextInput의 문제는 텍스트의 길이도 조절이 안되고.. 무엇을 입력해야하는지도 모르고.. iOS의 경우 키보드는 항상 대문자로만 나오며,, 아이폰을 써본 사람은 알겠지만 아이폰의 경우 잘못 입력하는 경우 자동수정이 된다. 특히 고유명사도 엉뚱한 값으로 자동수정이 되서 불편하다. 컴포넌트 루트 앱 파일 더보기 - App.js import App from "./src/App"; export default App; Input의 속성을 변경해본다. placeHolder의 경우 property를 받아서 적용해보자. - ./component/Input.js import React from "react"; import { Dimensions, useWindowDimensions } from "react-nati.. 2023. 1. 31. 리액트 네이티브] 13. Dimensions 안드로이드와 다르게 리액트는 뷰에 마진을 줘도 위 아래 마진이 생길 뿐, 양 옆 마진이 생기지 않는다 ^-ㅠ 컴포넌트 호출하는 파일과 루트 앱 파일 더보기 - ../src/App.js import React from "react"; import { StatusBar } from "react-native"; import styled, { ThemeProvider } from "styled-components/native"; import { theme } from "./theme" import Input from "./component/Input"; const Container = styled.SafeAreaView` flex: 1; background-color: ${({ theme }) => theme... 2023. 1. 31. 이전 1 2 3 4 5 다음 반응형
