react-native (6) 썸네일형 리스트형 [react-native] calendar marking 하기 react-native 에서 달력모듈을 사용하던 도중에 마킹하는 부분에서 애를 조금 먹어서 다른 분들은 그러지 않았으면 하는 바람에서 마킹하는법을 포스팅 합니다! 여기서는 하루를 선택했을때와 여러번 선택했을때 마킹하는법을 포스팅합니다. 먼저 하루를 선택하는 방법은 비교적 간단하다. { this.setState({selectedDate : day.year + "-" + day.dateString.split('-')[1] + "-" + day.dateString.split('-')[2],}); }} minDate={this.state.today} markedDates={{ [this.state.selectedDate]: { selected: true, marked: true, selectedColor: "r.. [react-native] 가격에 쉼표 넣기! 기존의 javascript 라면 toLocalString()을 사용하면 쉼표가 붙지만 우리의 안드로이드는 javascript 버전을 최신버전을 지원하지 않기 때문에 아이폰에서는 잘보이지만 안드로이드에서는 안보이는 경우가 생긴다. 그렇기때문에 function을 하나 만들거나 변환해주는 작업이필요하다. 서두가 길었지만, 코드는 의외로 단순하다. Number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")위와같은 코드를 넣게되면 자동으로 3번째마다 ,를 넣어준다. Number 부분에 변환을 원하는 숫자를 넣어주면 된다. [react-native] react-navigation사용하기 이번에는 react-native 에서 화면이동을 진행하려고한다. react-native에서 화면 이동은 여러가지 모듈이 있지만, 이 글에서는 facebook에서 만든 navigation을 이용할것이다. 모듈에 대한 설명과 메소드들의 설명은 다음 링크들을 참고하면된다. https://reactnavigation.org/docs/en/getting-started.html https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig 그럼 이제 본격적으로 navigation 모듈을 설치합니다. yarn add react-navigation 그 다음 App.js, First.js, Second.js 총 세개의 파일을 생성해줍니다. 기본.. [react-native] 가로 이미지 리스트뷰 만들기! 이번에는 이미지가 들어가 있는 가로 listview를 만들어보도록하자 기존의 listview 대신 이번에는 flatlist 를 이용하려고한다. flatlist에는 data 가 들어갈 파일하나와 data를 바인딩해서 보여줄 파일 하나 총 두개가 필요하다. 먼저 data에는 총 4개의 데이터를 넣었다. const flatListData = [ { "key" :"1", "name" :"Cream Tea", "foodDescription" : "this is cup of cream tea", "imageUrl" : "https://homepages.cae.wisc.edu/~ece533/images/airplane.png" }, { "key" :"2", "name" :"Cream Tea", "foodDescrip.. [react-native] 가로 스크롤뷰 만들기 기존의 스크롤 뷰를 만들면 default 로 세로로 되어있다. 변경하는 방법은 간단하다. 다음 명령어만 추가해주면 된다. horizontal = {true} 또한 ScrollView의 끝의 이벤트를 onMomentumScrollEnd를 통해 감지할 수 있다. 다음 소스는 스크린 3개를 만들고 마지막 스크린에 닿으면 Scrolling is End 로그가 찍히는 소스이다.import React, {Component} from 'react'; import {AppRegistry, ScrollView, Text, View, Dimensions, StyleSheet} from 'react-native'; class HorizonalScrollView extends Component { render() { retu.. [react-native] props 사용하기! react-native 를 사용하게되면 가장 많이 보는것이 props와 state일것이다. 이번시간에는 props의 개념과 사용하는 방법에 대해 알아보자. 개념 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다. 사용하는 방법 먼저 파일과 파일을 만든다 import React, { Component } from "react";import { StyleSheet, Text, View,} from "react-native";import Test from "./Test"; class Props extends Component { render() { return ( ); }} const styles .. 이전 1 다음
