본문 바로가기
728x90

전체 글131

[React Native] mobX를 사용한 state management npm install mobx --save npm install mobx-react --save 위 두 코드로 mobx를 설치한다. 설치가 끝난 후엔 프로젝트 폴더의 .babelrc를 "presets": [ ["react-native"] ], "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-transform-runtime", { "helpers": true, "polyfill": false, "regenerator": false }] ] 위처럼 플러그인을 적용(preset도 대괄호를 두번 적용해야 작동하는듯) 다음으로 package.json에서는 아래처럼 adevDependecies 내에 아래와 .. 2019. 9. 29.
[React Native] HTML에서 parsing(parse)해오는 방법 fetch("https://stackoverflow.com/questions/38343951/how-do-i-parse-an-html-file-in-react-native") .then((response) => response.text()) .then((text)=>{ console.log(text) }) 위처럼 fetch(url)을 하면 promise로 response를 준다. 여기서 response.text()를 하면 아래와 같이 HTML을 받아올 수 있다. javascript - How do I parse an HTML file in React Native? - Stack Overflow StackExchange.init({"locale":"en","serverTime":1532482651,"rou.. 2019. 9. 29.
[React Native] Animate 효과 주기 1. 먼저 아래와 같이 Animate를 import해준다 import { Animated } from 'react-native'; 2. Component의 state에 아래와 같이 Animated될 값을 new Animated.Value(초기값) 으로 설정해준다. this.state={ fadeVal: new Animated.Value(0) }; 3. render() 내부에 아래와 같이 Animated.View를 넣어 Animation효과를 줄 것이라고 명시한다(Animated.Text 등, View가 아닌 다른 컴포넌트들도 넣을 수 있음). 또한, Animate할 부분(아래와 같은 경우엔 opacity)에 2.번에서 설정한 값을 입력해준다. 4. Animate가 되게 하기 위해서 아래와 같이 funct.. 2019. 9. 29.
[React Native] createStackNavigator를 사용해 다른 페이지로 이동하도록 하는 방법 createStackNavigator를 사용해 한 페이지 내에서를 사용해 다른 페이지로 넘어갈 수 있게 할 수 있다. 그리고 아래처럼 만들어진 MainNavigation을 컴포넌트의 시작값으로 넣는다. const MainNavigation = createStackNavigator({ Home:{ screen: App }, TestPage: { screen: Test } }); export default MainNavigation; AppRegistry.registerComponent('Practice2', () => MainNavigation); createStackNavigator를 추가하면 화면 상단에 기본 헤더가 생성되는데, 만약 이 헤더를 지우고 싶다면, Home: { screen: App, na.. 2019. 9. 28.
[React Native] Android의 findViewById 처럼 Component의 id를 등록해주고 찾게해주는 방법 React Native component내의 props로 ref가 있는데, 이를 다음과 같이 사용한다 this.newComp = component} style={styles.textStyle_title}> {this.state.totalNumber} 이렇게 할 경우 this.newComp 에 위 Component가 입력되어, console.log(this.newComp); 이렇게 사용할 수 있게 된다. 만약 component 내부 prop을 변경하고싶다면(style, onPress 같은것들) this.textComp.setNativeProps 이처럼 setNativeProps를 호출해 this.textComp.setNativeProps({ style:[styles.textStyle_title,{ back.. 2019. 9. 28.
[React Native] Redux actions.js 예시 /* * action types */ export const ADD_TODO = 'ADD_TODO'; export const TOGGLE_TODO = 'TOGGLE_TODO'; export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'; /* * other constants */ export const VisibilityFilters = { SHOW_ALL:'SHOW_ALL', SHOW_COMPLETED:'SHOW_COMPLETED', SHOW_ACTIVE:'SHOW_ACTIVE' }; /* * action creators */ export function addTodo(text){ return { type: ADD_TODO, i.. 2019. 9. 28.
[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] View의 절대적 위치(Absolute layout)를 사용할 수 있는 방법 View의 style={} 내에 {position : “absolute”, top:0, bottom,0, left:0, right:0 } 처럼 값을 넣어 absolute위치를 지정해줄 수 있다 2019. 9. 28.
[React Native] Array에서 원하는 index에 있는 값을 삭제하는 방법 만약 dataArray = [ ~~~~~ ] 라는 Array가 있다고 할 때, index = 3 인 셀에 해당하는 값을 삭제하고 싶다면 dataArray.splice(index,1); 위와 같이 splice 를 쓸 수 있음(index는 지우고자하는 index, 1은 index로부터 몇개의 셀을 지우고자 하는 것인지) 2019. 9. 28.
[React Native] 데이터 파일에서 외부 js로 데이터 연결하기 위한 추가사항 js파일 내에 아래와 같은 데이터셋이 있다고 하자 let dataSample=[ { name:"img12222", text:"../assets/images/feather.png" } ]; 이 데이터셋을 외부에서 불러오기 위해선, 코드 아래에 module.exports = dataSample; 위와 같이 export해주는 코드를 넣어줘야 한다. 또한, 외부 js에서는 import dataSample from '../assets/data/dataSample’ 이와같이 dataSample을 import해서 사용해야 한다. 2019. 9. 28.
[React Native] Android의 match_parent와 같은 기능을 위한 팁 flexbox를 통해 flex:1 등을 통해 크기 변화를 줄 경우 flexDirection의 방향으로 길어지기 때문에, 세로 방향으로 배열된 뷰의 경우 가로 방향으로 match_parent를 하기 어렵다. 또한, Dimensions.get(‘window’).width를 통해 뷰의 크기를 조절할 수도 있지만, 팝업창 등 parent view의 크기가 스크린 크기와 다른 경우 이 또한 무용지물이 된다. 따라서 이 경우 styleSheet내에 alignSelf: “stretch” 라고 주면 아래 New Info와 같이 flexDirection의 수직 방향으로도 match_parent를 할 수 있다. 혹은 child의 style에서 width나 height에 “100%”와 같이 %값을 줄 수도 있다. 2019. 9. 28.
[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.
728x90

티스토리툴바