[React Native] SectionList를 통해 전화번호부/사전같은 기능 만들기
SectionList 내부에 sections에는 데이터를, renderItem을 통해 flatList와 같은 기능을 준다. 다음으로 renderSectionHeader를 통해 각 섹션마다 헤더(사전으로 치자면 A,B,C,D...)를 추가해준다. 데이터는 크게 섹션헤더, 섹션내 데이터 두 가지로 이뤄진다. 섹션헤더는 String값, 섹션 내 데이터는 { } 형식으로, 아래쪽 '데이터 예시’ 파트에 간단히 예시가 소개되어있다. 샘플 예시 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet, View, ..
2019. 9. 28.
[React Native] ScrollView
ScrollView는 사용이 매우 간편. keyboardDismissMode, maximumZoomScale, contentContainerStyle,pagingEnabled,showsHorizontalScrollIndicator 등의 feature를 사용할 수 있으며, maximumZoomScale, minimumZoomScale은 iOS에서만 작동함. 샘플 예시 import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, Image, } from 'react-native'; export default class App extends Component { render() { return (
2019. 9. 28.
[React Native] Touchable Opacity
onPress, activeOpacity 등의 값 가질 수 있음 Child 뷰가 클릭될수 있게 돕는 기능으로, activeOpacity ={1}을 주면 클릭할때 반짝거리는 효과 완전 사라지고 평면 클릭하는것처럼 됨. onPressIn, onPressOut등을 사용하면 버튼을 눌렀을 때, 버튼을 뗐을 때를 인식해서 받아올 수 있음 샘플 예시 import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, TextInput, Button, Platform, TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithoutFeedback } from '..
2019. 9. 28.
