5. 기본 컴포넌트들 - MrKwon/Vue-Native GitHub Wiki
유저 인터페이스를 빌드하기 위한 기초적인 컴포넌트는 뷰 컴포넌트이다. 뷰는 레이아웃을 지원하는 컨테이너이다.
이러한 Views 은 다른 뷰의 내부에 내포되도록 그리고 부모 뷰 내부에 많은 자식 뷰를 가질 수 있도록 설계되었다. 부모 뷰들은 내부에 모든 종류의 뷰들을 내포할 수 있다.
HTML에서의 <div>와 동등한 것이 Vue Native의 뷰이다.
텍스트를 보여주기 위한 Vue Native의 컴포넌트. 텍스트 컴포넌트는 내포, 스타일링, 터치 핸들링을 지원한다.
<template>
<view class="text-container">
<text>Hello World</text>
</view>
</template>
<style>
.text-container {
flex: 1;
margin-bottom: 30;
}
</style>
다른 형식들(네트워크 이미지들, 정적 리소스들, 임시 로컬 이미지들과 카메라 롤에 있는 로컬 디스크의 이미지들)의 이미지들을 보여주기 위한 Vue Native 컴포넌트
아래에서 우리는 동적으로 v-bind를 짧게 줄인 구문인 ":"를 이용하여 각각의 이미지의 source 속성을 설정한 것을 볼 수 있다. 또한 style프로퍼티에 v-bind하여 오브젝트 안에 적용하기 원하는 스타일의 키-값 쌍 몇 개를 전달한 것도 확인할 수 있다.
<template>
<view>
<image
:source="require('/vue-native/img/favicon.png')"
/>
<image
:style="{width: 50, height: 50}"
:source="{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}"
/>
<image
:style="{width: 66, height: 58}"
:source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}"
/>
</view>
</template>
키보드를 통해 앱 안에 텍스트를 입력하는 근본적인 컴포넌트이다. Props를 통해 자동 수정, 자동 대문자, 플레이스 홀더 텍스트 같은 특징들을 설정할 수 있고 숫자 키패드 같은 다른 키보드 유형도 설정이 가능하다.
이 예제에서, v-bind 디렉티브의 이점을 다시 이용할 뿐만 아니라 새로운 v-model 디렉티브도 이용한다. 잠시 후에 이 디렉티브로 돌아올 것이다. 하지만 현재로서 v-model 디렉티브가 양방향 데이터 바인딩 이라는 멋진 개념을 설정할 수 있게 해준다는 것을 알고 있으면 됩니다.
<template>
<text-input
:style="{height: 40, borderColor: 'gray', borderWidth: 1}"
v-model="text"
/>
</template>
<script>
export default {
data: function() {
return {
text: ''
};
}
}
</script>
터치 잠금 "응답자"과 통합을 제공하면서 스크롤 뷰에서 플랫폼을 감싸고 있는 컴포넌트. 스크롤 뷰는 반응하는 모든 자식 컴포넌트들을 한번에 렌더링 합니다. 이는 이해와 사용을 매우 쉽게 해줍니다.
스크롤 뷰가 작동하기 위해서는 높이를 바인딩해야 하는 것을 명심하세요. (스크롤 상호 작용을 통해) 스크롤 뷰는 제한되지 않은 높이의 자식을 제한한 컨테이너에 포함하고 있기 때문입니다.
<template>
<scroll-view :content-container-style="{contentContainer: {
paddingVertical: 20
}}">
<!-- Content goes here -->
</scroll-view>
</template>
모든 플랫폼에서 잘 렌더링 되는 기본 버튼 컴포넌트. 최소 수준의 사용자화(customization)를 지원합니다.
단지 데이터에 바인드하고 Vue 디렉티브와 함께 스타일을 보여주는 것보다 더 많은 것들을 할 수 있습니다.
이 버튼은 바인딩을 위한 이벤트 핸들러인 on-press속성을 가지고 있습니다. 이벤트가 실행될 때, Vue 인스턴스에서 메서드를 실행합니다.
<template>
<button
:on-press="onPressLearnMore"
title="Learn More"
color="#841584"
accessibility-label="Learn more about this purple button"
/>
</template>
<script>
export default {
methods: {
onPressLearnMore: function() {
alert('Hello')
}
}
}
</script>
플랫리스트는 다음의 편리한 기능들을 지원하는 간단한 플랫 리스트들을 렌더링하기 위한 고성능 인터페이스입니다.
- 플랫폼에 완전히 구애받지 않음
- 선택적인 수평 모드
- Configurable viewability callbacks
- 헤더 지원
- 푸터 지원
- 분할 지원
- 당겨서 새로고침
- 스크롤 로딩
- 인덱스로 스크롤 지원
플랫리스트 사용의 한가지 단점은 renderItem 메서드가 React Native 컴포넌트들로 이루어진 JSX로 반환되어야 한다는 것 입니다. 우리는 이에 대해 작업 중이고 곧 사용 가능할 것 입니다.(React를 사용하지 않도록 하는 것에 대해 작업 중이라는 의미로 보임)
다음은 데이터 프로퍼티에 바인딩하고 키-값 객체들을 담고 있는 배열 안에 데이터 프로퍼티를 전달합니다. 뿐만 아니라 우리가 바인딩하고 반복하는 데이터 목록을 렌더링합니다.
<template>
<flat-list
:data="[{key: 'a'}, {key: 'b'}]"
:render-item="(item) => renderList(item)"
/>
</template>
<script>
import React from 'react';
import { Text } from 'react-native';
export default {
methods: {
renderList: function(item) {
return (<Text>{item.item.key}</Text>)
}
}
}
동그란 로딩 인디케이터를 보여주는 컴포넌트. 이 컴포넌트는 v-if나 v-show 같은 조건부 Vue 디렉티브와 함께 결합하여 사용할 때 좋습니다. 왜냐하면 Vue 인스턴스 데이터 프로퍼티 안에 있는 블리언 값에 기반하여 표시 여부(visibility)를 전환할 수 있기 때문입니다.
<template>
<view
v-if="isLoading"
:style="{flex: 1, justifyContent: 'center'}">
<activitiy-indicator size="large" color="#0000ff" />
</view>
</template>
특정한 제목과 메시지가 있는 알림 대화창을 실행하는 컴포넌트. 뿐만 아니라 선택적으로 버튼들을 알림 안에 추가할 수 있다. 어떤 버튼을 눌러도 각각에 대하여 onPress 콜백을 실행하고 알림을 종료합니다. 기본적으로 렌더링되는 버튼은 'OK'버튼입니다.
다시 말해, 우리는 이 알림을 on-press 이벤트 리스너에 바인딩 되어있는 다른 메서드와 함께 초기화합니다.
<template>
<button
:on-press="onPressLearnMore"
title="Learn More"
color="#841584"
accessibility-label="Learn more about this purple button"
/>
</template>
<script>
import { Alert } from 'react-native'
export default {
methods: {
onPressLearnMore: funtion() {
Alert.alert(
'Alert Title',
'My Alert Msg',
[
{text: 'Ask me later', onPress: () => console.log('Ask me later Pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
}
}
}
</script>
앱 상태바를 컨트롤하는 컴포넌트
<template>
<view>
<status-bar
background-color="blue"
bar-style="light-content"
/>
</view>
</template>
블리언 "on-off" 입력을 렌더링하는 컴포넌트. 스위치는 Vue 인스턴스 위에서 사용자의 행동을 반영하기 위한 컴포넌트에 대하여 프로퍼티 값을 업데이트 하는 on-value-change 콜백이 필요한 컨트롤 된 컴포넌트 입니다.
<template>
<view style = {styles.container}>
<switch
:on-value-change = "handleChange"
:value = "value" />
</view>
</template>
<script>
export default {
data: function() {
return {
value: false
}
},
methods: {
handleChange: function(val) {
this.value = val
}
}
}
</script>
위의 코드는 버전 0.0.10` 이상인 vue-native-template-compiler의 v-model``을 사용하여 다음과 같이 구현될 수 있습니다.
<template>
<view style = {styles.container}>
<switch v-model="value"/>
</view>
</template>
터치 입력에 적절하게 반응하는 뷰를 만드는 래퍼입니다. 아래를 버튼을 누르면 래핑된 뷰의 투명도가 감소하여 흐려집니다.
<template>
<touchable-opacity :on-press="onPressButton">
<image
:style="{alignItems: 'center', backgroundColor: '#DDDDDD'}"
:source="require('./myButton.png')"
/>
</touchable-opacity>
</template>
<script>
export default {
methods: {
onPressButton: function() {
alert('Clicked Image')
}
}
}
</script>
웹뷰 컴포넌트는 네이티브 뷰에서 웹 컨텐츠를 렌더링하는 특별한 컴포넌트입니다.
<template>
<web-view
:source="{uri: 'https://github.com/facebook/react-native'}"
:style="{marginTop: 20}"
/>
</template>
다른 컴포넌트들과 깊이 있는 API에 대한 세부 사항들에 대해서는 https://facebook.github.io/react-native/를 참고하세요.
Vue Native Vue Native Vue Native Vue Native Vue Native