본문 바로가기

Mobile/React Native

(7)

[React Native] Height and Width component의 height와 width는 화면에서 크기를 결정한다. Fixed Dimensions 크기를 설정하는 가장 심플한 방법은 고정된 width와 height를 style에 추가 하는 것이다. React Native에서 모든 크기는 단위가 없고, density-independent pixels(밀도독립화소?)을 나타낸다. 이 방법으로 크기를 설정하는 것은, screen 크기에 상관없이 항상 정확히 동일한 크기를 그려야 하는 component에 일반적으로 쓰인다. Flex Dimensions A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does ..

[React Native] Style React Native에서 스타일을 정의할 때 특별한 언어나 문법을 사용하지 않는다. 그냥 JavaScript를 사용하여 application을 디자인 한다. names는 camel casing을 사용한다. (e.g. backgroundColor) 구성 요소가 복잡 해짐에 따라 StyleSheet.create를 사용하여 여러 스타일을 한 곳에서 정의하는 것이 더 깔끔합니다. 예를 들면 다음과 같다. Text style을 Customizing 하는 다양한 방법 ☞ https://facebook.github.io/react-native/docs/text 참고 https://facebook.github.io/react-native/docs/style React Native · A framework for bu..

[React Native] State component를 컨트롤 할 수 있는 2개의 데이터 타입이 있다. props and state props는 부모에 의해 설정되고, component의 lifetime 동안 고정된다. 데이터가 변화 되어야 한다면, state를 사용해야 한다. 일반적으로, 생성자에서 state를 초기화하고 변경 할때는 setState를 호출해야한다. 예를 들어, 항상 깜빡이는 text를 만들고 싶다고 가정 해 보자. blinking component가 생성될 때 text는 한번 설정되므로 prop이다. "텍스트가 현재 켜져 있는지 꺼져 있는지"는 시간이 지남에 따라 변경되므로 state로 유지되어야 한다. 실제 application에서는, 아마 timer로 state를 설정하지 않을 것이다. 서버나 사용자 입력으로 부터 ..

[React Native] Props 대부분의 component 들은 생성할 때 다른 parameter들과 함께 커스터마이징 가능함 이렇게 생성한 파라미터들을 props라고 부른다 (properties 줄임말) 아래 코드에서 Image는 하나의 기본적인 React Native component이다. 이미지를 만들 때, 어떤 이미지를 보여 줄 것인지 제어하는 source라는 prop을 사용 할 수 있다. {pic} : JSX에 포함된 변수. 중괄호를 주목하자! :D 어떤 Javascript expression 이든 JSX안 중괄호 속에 넣을 수 있다. 내가 만든 component에도 props를 사용 할 수 있다. (아래 코드에서 name) Greeting component에서 name을 prop으로 사용함으로써, 각각의 greetings에서..

[React Native] Learn the Basics React Native는 React하고 비슷하지만, web components (building blocks) 대신 native components를 사용한다. React Native app 기본 구조를 이해하려면 JSX, components, state, props 등을 이해해야한당! Hello World 흠.. ES2015 알아야 하나요..? Hello world! 익숙하지 않은 위 코드는 JSX 이다. Javascript 안에 포함되는 XML 문법. 는 text를 나타낼 수 있는 component 이고, = or Components 위 코드에서는 HelloWorldApp라는 새로운 Component를 정의했다. 우리가 React Native app 을 개발할 때 이와 같은 새로운 components..

Expo, Create React Native App create-react-native-app 패키지를 npm(node.js package manager)을 이용하여 설치하자. RN은 npm을 이용하여 디펜던시를 관리한다. npm install -g create-react-natvie-app 뭐가 다른건지 모르겠는데, https://expo.io/learn : Get Started 에서는 1. Node.js 설치 2. npm install expo-cli --global 3. expo init my-new-project cd my-new-project expo start 4. QR코드로 폰에서 열기 5. your-project/App.js로 앱 만들기!

Getting Started 1. Expo tools Xcode or Anroid Studio를 설치, 설정할 필요 없이 React Native를 가장 쉽게 시작 할 수 있다. Snack을 사용해서 web browser에서 바로 React Native를 사용해 볼 수 있다. Hello World import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default class HelloWorldApp extends Component { render() { return ( Hello, world! ); } } https://expo.io/ Expo A free and open source toolchain built around..

이전 1 다음

티스토리툴바