React Native 공부 썸네일형 리스트형 React Native 공부 10 - 간단한 구현해보기 MyPage 화면을 구성하기 앞서 앞에 배운 내용을 토대로 텍스트 띄우기, 아이콘 띄우기 등 간단한 테스트 소스코드를 구현해 보았다.. import React, {Component} from 'react';import {Text, View} from 'react-native'; export default class TestMyPageScreen extends React.Component{ _onPressLink() { Alert.alert("my 페이지로 넘어가랏!!!"); } render(){ return( Hi This is test message. I hope you'll get better on react-native ); }} 다음과 같이 TestMyPageScreen.js 코드를 작성하였고, .. 더보기 React Native 공부 9 - Handling Text Input and Touch Handling Text Input TextInput은 사용자가 텍스트를 입력할 수 있게 해주는 기본 component이다. onChangeText prop은 text가 변화할 때마다 불리는 function이고, onSubmitEditing prop은 text가 보내질 때마다 불리어 지는 function이다. 아래 예제는 single word마다 🍕로 변형해서 출력해주는 형식이다. import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class PizzaTranslator extends Component { constructor(props).. 더보기 React Native 공부 8 - Layout with Flexbox React Native - Layout with Flexbox component들은 flexbox 알고리즘을 사용하여 그들의 자손들의 layout을 구체화시킬 수 있다. Flex Direction component's style 은layout의 주축을 설정한다. default 는 column 이고 row, column중 하나를 선택 할 수 있다. import React, { Component } from 'react';import { AppRegistry, View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` .. 더보기 React Native 공부 7 - Dimensions Height & Width 1. Fixed Dimensions (정적으로 지정하기 - 예시) import React, { Component } from 'react';import { AppRegistry, View } from 'react-native'; export default class FixedDimensionsBasics extends Component { render() { return ( ); }} // skip this line if using Create React Native AppAppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics); 2. Flex Dimensionscomponent style에서 fl.. 더보기 React Native 공부 6 - State & Style React Native 홈페이지 - State 1. component를 control 할 수 있는 데이터 타입은 props, state 두 가지 이다. props를 사용하게 되면 component의 수명동안 정적인 형태를 지니게 되며, props는 부모에 의해 설정된다. 반면에, 동적인 데이터(변화할 데이터)들은 state를 사용해야한다. 2. 일반적으로, constructor에서 state 초기화를 선언하고나서 setState 문을 통하여 변화를 요구할 수 있다. 3. 만약, 지속적으로 깜빡거리는 텍스트를 만들고 싶을 경우를 예로 들어보자. blinking component 가 생성되자마자, text는 설정된다. 따라서 text그 자체로는 prop 의 성격을 지닌다. setState가 불리어질때, Bl.. 더보기 React Native 공부 5 - Props 1. 대부분의 components들은 생성될 때 각각 다른 매개변수들로 unique하게 구성됩니다. (구체적으로 표현되기 때문에 각각의 components들이 unique하다고 생각하시면 될 것 같습니다.) 예를 들면, 간단한 React Native component는 Image인데, image를 생성할 때, source라는 prop(속성)을 사용하여 이미지 보이기 및 감추기를 제어할 수 있습니다. 아래 코드에서 {pic} 이라는 괄호를 주목해보면 - 이 괄호(block영역)는 변수 pic을 JSX로 포함시킵니다. 어떤 JavaScript 표현이라도 JSX 내 괄호{ } 안에 표현할 수 있습니다. import React, { Component } from 'react';import { AppRegistr.. 더보기 React Native 공부 4 - Learn the Basics 보다 자세한 설명은 React-Native홈페이지 가시면 잘 나와있습니다 1. import, from, class, extends 와 같은 예약어들은 ES2015에서 사용하는 언어들이다.1-1. ES2015(또는 ES6)은 official standard로 지정되었음에도 불구하고, 아직은 모든 브라우저에서 지원되지 않았는데, 이것은 JavaScript의 개선된 집합체(?)라고 생각하면 된다. 2. Hello world! 는 JSX라고 일컫는데, JavaScript내의 XML이 내재된 형태라고 보면 된다.2-1. 많은 프레임워크들은 markup language 안에 코드를 내제할 수 있도록, 특별한 템플릿 언어들을 사용하는데 비해서, React는 반대로 적용된다.2-2. JSX는 markup languag.. 더보기 React Native 공부 3 - 프레임워크 https://facebook.github.io/react-native/ JavaScript와 React Native를 사용하여 모바일 어플을 개발할 때, 전체적인 틀이 위의 URL에 들어가면 자세히 나와있다. 1. 가장 기본적인 틀 - 위의 import문 두 줄은 필수적으로 써주는 것이 좋다 import React, {Component} from 'react';import {Text, View} from 'react-native'; class HelloReactNative extends Component { render() { return ( If you like React, you'll also like React Native. Instead of 'div' and 'span', you'll use .. 더보기 이전 1 2 다음
