본문 바로가기
728x90

프로그래밍/React Native(2018)29

[React Native] 팝업창 띄우기 1. 팝업창 역할을 할 Component 제작 -> import Modal from 'react-native-modalbox' 위와 같이 Modal 을 modalbox로부터 import해와 아래처럼 컴포넌트의 메인 View로 만들기 render() { return ( { alert("modal closed"); }} > New Info this.setState({text1:text})} /> New Info this.setState({text2:text})} /> this.addNew()}/> ); } 2. 팝업창 컴포넌트 내에 Modal을 실행시킬 기능 탑재 showAddModal = () =>{ this.refs.myModal.open(); }; 3. 메인 화면에서 팝업창을 준비시킴. -> rende.. 2019. 9. 28.
[React Native] FlatList를 통한 ListView구현 안에 data, renderItem 두 개의 props를 넣어 완성. data 에는 리스트로 보여주길 원하는 값을, renderItem은 리스트로 보여줄 템플릿을 렌더링한다. renderItem={({item,index})=>{ 여기에서 볼 수 있듯, renderItem= { ( {item,index} ) } 로 { 안에 ( 안에 {로 3중으로 해야 item을 제대로 활용할 수 있다. 또한, horizontal={true} 이나 pagingEnabled={true} 등을 사용할 수 있다. 다음으로 extraData 를 props로 전달함을 통해 data를 바꾸지 않고, extraData의 값을 변형하여 list를 re-render하라는 신호를 보낼 수 있다. 샘플 예시 /** * Sample React .. 2019. 9. 28.
[React Native] OS에 따른 기능(or 디자인) 차이 주는 방법 Platform.OS 가 === ‘ios’ 인지, === ‘android’인지에 따라 동작을 다르게 할 수 있다. 예시로, 상단 마진을 줄 때 iOS인 경우엔 마진을 34, Android인 경우엔 마진이 없도록 설정하는 예시는 아래와 같다. marginTop: Platform.OS === 'ios' ? 34 : 0 2019. 9. 28.
[React Native] 스크린 크기(width, height) 구하는 방법 먼저 import에서 Dimensions를 가져온 후 import { Dimensions } from 'react-native'; render() method내부에서 아래처럼 width, height를 불러온다 let screenWidth = Dimensions.get('window').width; let screenHeight = Dimensions.get('window').height; 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] props 예시 아래 예시에서 보듯 상위 Component에서 하위 Component를 render할때 props를 줄 수 있다. 이를 통해 전달받은 값으로 하위 Component에서 아래와 같이 props를 사용할 수 있다. {this.props.title} {this.props.desc} 샘플 예시 import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; class User extends Component{ constructor(){ super(); } render(){ return( {this.props.title} {this.props.desc} ); } } export default class A.. 2019. 9. 28.
[React Native] Google Maps https://github.com/react-community/react-native-maps 여기 한번 참고해보길. 2019. 9. 28.
[React Native] Image 이미지를 넣을 수 있는 android 의 ImageView와 같은 역할. 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.
[React Native] Touchable Highlight onPress, underlayColor, onShowUnderlay 등의 값 가질 수 있음 Child 뷰가 클릭될수 있게 돕는 기능으로, underlayColor={“#00000000”}을 주면 클릭할때 반짝거리는 효과도 사라져서 깔끔하고 좋음 onPressIn, onPressOut등을 사용하면 버튼을 눌렀을 때, 버튼을 뗐을 때를 인식해서 받아올 수 있음 샘플 예시 import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, TextInput, Button, Platform, TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, TouchableWithout.. 2019. 9. 28.
[React Native] Documentation 리액트 네이티브 공식 페이지 https://facebook.github.io/react-native/ React Native · A framework for building native apps using React A framework for building native apps using React facebook.github.io Redux 설치 방법 Redux 설치를 위해 프로젝트 폴더 내로 Terminal 이동 후 npm install --save redux npm install --save react-redux npm install --save-dev redux-devtools 위 코드 입력 React Native 에뮬레이터 실행 방법 *To run your app on iOS:* cd Web.. 2019. 9. 28.
728x90