Dev/RN10 10. [RN] 스크롤 뷰 추가해보기 이번 시간에는 간단하게 스크롤 뷰에 대해 학습하겠습니다. 걍 뭐 학습이랄 것도 없습니다. Scrollview 태그 안에 넣기만 하면 됩니다. class App extends Component{ state = { appName: 'My first app', random: [1,2,3,4,5] } onAddRandomNum = () => { //alert('add random number'); const randomNum = Math.floor(Math.random()*100)+1; this.setState(prevState => { return { random: [...prevState.random, randomNum] } }) } onNumDelete = (position) => { //alert('de.. 2021. 2. 1. 9. [RN] 랜덤숫자 추가 및 제거해보기 이번 시간에는 버튼을 클릭하면 랜덤으로 숫자가 1~100까지 추가되고, 생성된 버튼을 누르면 삭제될 수 있도록 하는 이벤트를 배워보겠습니다. App.js 이전 배열에서 추가되는 숫자를 넣기 위해 랜덤 변수를 생성하고, 배열에 append해줍니다. onAddRandomNum = () => { //alert('add random number'); const randomNum = Math.floor(Math.random()*100)+1; this.setState(prevState => { return { random: [...prevState.random, randomNum] } }) } 숫자를 터치하면 숫자가 지워지도록 하기 위한 함수를 생성합니다. filter 함수 특정 조건에 부합하는 요소만 뽑아내서 새.. 2021. 1. 31. 8. [RN] 목록 만들어보기 이번 포스팅에서는 목록을 만들어보려고 합니다. props 개념에 대해 조금씩 이해가 되기 시작했습니다. App.js 조작하기 for문을 출력하기 위해서 먼저 state 값에 배열을 넣어줍니다. 그리고 NumList라는 태그를 만들어서 조각으로 데이터를 쏴줍니다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; import Header from './src/header'; import Generator from './sr.. 2021. 1. 30. 7. [RN] 버튼 만들어보기 이번 포스팅에서는 버튼을 만들어보려합니다. 버튼 만들기 import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; class App extends Component{ state = { appName: 'My first app' } render(){ return ( alert('text touch event')} >hello world ) } } App.js에서는 왠지 모르겠지만 버튼이라는 이름이 아니라 generator라는 이름으로 버튼을 생성했습니다. genera.. 2021. 1. 29. 이전 1 2 3 다음
