본문 바로가기
728x90

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

[React Native] createBottomTabNavigator의 header 없애는 방법 아래 코드처럼 stack의 Index 끝에 navigationOption를 넣고 header:null을 입력해주면 header가 두개가 생기는 일을 막을 수 있다. const RootStack = createStackNavigator({ Index:{ screen:createBottomTabNavigator({ Home:createStackNavigator({ Home:{ screen:WordbookScreen, }, ReviseWordbook, WordPage, ReviseWord, AddNewFolder, AddNewWord, TestScreen, TestScoreScreen, WebScreen, InstantSearchScreen, SettingsScreen, UpdateListScreen, }) .. 2019. 9. 29.
[React Native] 간단한 팝업창을 띄우는 방법 먼저 아래와 같이 Alert를 import해오고, import { Alert } from 'react-native'; 아래와 같이 Alert.alert를 사용해 경고 문구를 띄워준다. Alert.alert( '앗!', '단어장을 전부 다 지우면 안돼요!', [ {text: 'OK', onPress: () => console.log('OK Pressed') }, ] ); 2019. 9. 29.
[React Native] Android 뒤로가기 버튼을 다루는 방법 먼저 아래와 같이 BackHandler 를 import 해온다. import { BackHandler } from 'react-native'; 다음으로 뒤로가기 버튼을 다루고자 하는 뷰의 Constructor에 아래와 같은 코드 추가. this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress); 또한 컴포넌트 코드 내에서 위에서 선언한 handleBackPress() 를 구현하고, return false면 기존 뒤로가기 명령을 그대로 보내고, return true를 하면 기존 뒤로가기 명령을 무시하게 된다(뒤로가기 버튼이 작동하지 않게 된다). handleBackPress(){ console.log(".. 2019. 9. 29.
[React Native] 뒤로가기 버튼 두번 눌러서 앱 종료하기 http://webinformation.tistory.com/103 참고 2019. 9. 29.
[React Native] Navigation의 header사용방법 https://junyoru.tistory.com/51 에서 설명한 createStackNavigator에서, header=null로 하지 않고 사용하고자 할 때에 참고용으로 https://reactnavigation.org/docs/en/stack-navigator.html props는 이 링크에서 확인할 수 있다. 아래처럼 static navigationOptions를 통해 각 컴포넌트에서 헤더에 어떤 정보를 가지고 있게 할 수 있는지 정할 수 있다. 기본적으로 headerLeft, title, headerRight, headerStyle 등등이 있다. export default class Home extends Component { static navigationOptions ={ title:{ap.. 2019. 9. 29.
[React Native] array를 alphabetically 배열하는 방법 users.sort(function(a, b){ if(a.firstname b.firstname) return 1; return 0; }) 위 코드 응용 2019. 9. 29.
[React Native] Object를 storage에 저장하는 방법 https://stackoverflow.com/questions/45541727/how-can-i-save-object-in-mobille-storage-using-react-native 참고 2019. 9. 29.
[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.
728x90

티스토리툴바