일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Android
- JS
- array
- TextView
- stylesheet
- 오버라이딩
- nodejs
- Kotlin
- JavaScript
- fragment
- Linux
- 코틀린
- npm
- TypeScript
- 구글맵스
- Javscript
- 랜덤번호
- 랜덤넘버
- 리액트
- scrollview
- Java
- 자바스크립트
- 안드로이드
- Hook
- React
- GoogleMaps
- SpringBoot
- 스프링부트
- RecyclerView
- button
- Today
- Total
목록React (19)
타닥타닥 개발자의 일상
프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; const colorList = [ { color: '#00974A', val: '00974A' }, { color: '#2e6067', val: '2e6067' }, { color: '#a92127', val: 'a92127' }, { color: '#030364', val: '030364' }, { color: '#0d6729', val: '0d6729' }..
프로젝트 생성문 npx react-native init sample17 --template react-native-template-typescript 구현할 이미지는 scr>assets폴더에 저장해둔다. ship.jpg 파일을 저장해두었다. App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, View } from "react-native"; export default function App(){ return( ) } 실행화면 글자 배경색, 글자 위치 지정하기 App.tsx import React from "react"; import { Image, SafeAreaView, StyleSheet, Text, Vi..
아이콘 참고 사이트 https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io 프로젝트 생성 npx react-native init sample16 --template react-native-template-typescript 필요한 부분 install npm i react-native-paper checkbox를 만들기 위해서는 android>app>build.gradle 부분을 수정해야한다. (제일 마지막 한줄 코드만 추가됨) build.gradle apply plugin: "com.android.application" import com.android.build.Out..
프로젝트 생성후 아래의 설치문을 입력해서 radiobutton을 import한다. 설치문 npm i react-native-flexi-radio-button --save 설치문을 입력한뒤 생성된 node_modules>react-navtive-flexi-readio-button>lib를 방문하여 radioButton.js와 radioGroup.js를 편집해준다. radioButton.js import React, { Component } from 'react' import PropTypes from 'prop-types' import { StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native'; export default class R..
프로젝트 생성후 입력해야 하는 설치문 npm install react-native-picker-select npm install @react-native-picker/picker npm install watcher npm install react-native-svg@9 App.tsx import React, { useState } from "react"; import { Button, View } from "react-native"; import RNPickerSelect from 'react-native-picker-select' const values = [ {label:'Football', value:'축구'}, {label:'Baseball', value:'야구'}, {label:'Hockey',..
App.tsx import React, { useState } from "react"; import { Button, Text, TextInput, View } from "react-native"; let glTag:String //사용되지 않는 함수 function MyFunc(props:any){ console.log(props.name) props.setText('Money') return {props.name} } export default function App(){ const [ inputTextValue, setInputTextValue ] =useState("") const [text,setText] = useState("") //setInputTextValue에 text값을 입력하는 함수..
따로 생성해야될 폴더나 파일은 없다. App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, StyleSheet, Text, TextInput, View } from "react-native"; //scrollView,Image,TextInput export default function App(){ return( Hello World ) } App.tsx 구현시 안드로이드 화면 App.tsx import React, { useState } from "react"; import { Alert, FlatList, Image, ScrollView, SectionList, S..
특별히 생성하는 파일이나 폴더는 없다. App.tsx import React, { useState } from "react"; import { Button, Text, View } from "react-native"; /* class App extends React.Component{ constructor(props:any){ super(props) this.state = { count:0 } } render() { return( You clicked{ this.state.count } times this.setState({count: this.state.count+1})}/> ) } } export default App */ const App =() =>{ const[count,setCount] = u..
npx react-native init (프로젝트명) --template react-native-template-typescript 위의 명령어로 구현된 프로젝트가 생성되면 좌측 콘솔에 cd 프로젝트명 npm start 우측 콘솔에 cd 프로젝트명 npm run android 입력하여 설정 완료하기 위에 명시된대로 순서대로 입력하면 콘솔창이 아래와 같아진다. 생성된 프로젝트 폴더에 있는 App.tsx 파일 열고 아래와 같이 입력한다음 저장해보자. import React from "react" import {SafeAreaView, Text} from "react-native" /* export default function App(){ //상수 const str:String = 'Hello World' ..