타닥타닥 개발자의 일상

프로젝트 생성문 npx react-native init sample18 --template react-native-template-typescript App.tsx import React from "react"; import { StyleSheet, Text, View } from "react-native"; //flex : 크기 비율로 설정하는 것 export default function App(){ return ( 두번째 화면 ) } const style = StyleSheet.create({ container:{ flex:1, width:300 }, caseOne:{ flex:1, backgroundColor:'yellow' }, caseTwo:{ flex:1, backgroundColor:'bl..

프로젝트 생성문 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..

Export / Import로 모듈 구현하기 src 폴더 생성 > src 폴더 안에 screens 폴더 생성 > screens 폴더 안에 NamedExportModuel.tsx/NamedImportModuel.tsx 생성 NamedExportModule.tsx import React from "react" import { Text, View } from "react-native" //변수 const sampleVar = "sample variable" //함수 const sampleFunc = () => "sampleFunc() 호출함" //number=소수+정수 const sampleNumFunc = (num1:number,num2:number) => (num1*num2) //Object == json..