app/react-native
-
<react-native>mission 앱 제작1_메인화면, 로그인, 홈 화면, ...app/react-native 2022. 5. 18. 13:31
APP 제작 APP 설명 혼자서는 정해진 일을 하지 못하게 되고, 좋은 습관을 들이지 못하는 사람들을 위해, 오늘 일을 내일로 미루는 사람들을 위해 터치 업 할 수 있도록, 타인과 약속을 만들고 공유하여 능률을 올릴 수 있는 어플 구조설명 DB 관계도 현재까지 구현 page 설명 src - assets 필요한 image - components - core 아직 불필요 - core - theme.tsx만 사용 - screens 보여지는 화면 app.tsx screens가 보이도록 연결 pakage.json 깔아야하는 패키지를 보여줌 pakage.json 필요한 pakege들을 yarn or npm 으로 설치 app.tsx src/screen으로 가도록 연결 가장 첫화면은 appstack에 들어가는 logi..
-
<react-native>view 컴포넌트와 css 박스 모델/자원과 아이콘 사용하기app/react-native 2022. 4. 11. 12:55
react-native-paper color 패키지 먼저 설치 npm i react-native-vector-icons react-native-paper color npm i -D @types/color app.tsx import React from 'react' import {Platform, Dimensions, StyleSheet, SafeAreaView, Text} from 'react-native' import {Colors} from 'react-native-paper' import color from 'color' const {width, height} = Dimensions.get('window') export default function App() { return ( os: {Platf..
-
<react-native> faker / error 확인app/react-native 2022. 4. 9. 18:01
가짜 데이터 만들기 우선, faker 설치 npm i faker npm i -D @types/faker 그 후 디렉토리 설정 mkdir src cd src cd data touch index.ts IPerson.ts faker.ts util.ts createRandomPerson.ts cd ../.. app.tsx import React from "react"; import { SafeAreaView, Text } from "react-native"; import * as D from './src/data' const person = D.createRandomPerson() export default function App() { return ( {JSON.stringify(person, null, 2)..
-
<react-native> style 속성과 styleSheet API ...app/react-native 2022. 4. 9. 17:23
style 속성 배우기 기본 import React from "react"; import { SafeAreaView, Text } from "react-native"; export default function App() { return ( Hello world! ) } 컴포넌트 스타일 설정 import React from "react"; import { ImageBackground, SafeAreaView, Text } from "react-native"; export default function App() { return ( Hello world! ) } 실행결과 styleSheet 버전 import React from "react"; import {StyleSheet, SafeAreaView, T..
-
<react-native> Button, alert, ...app/react-native 2022. 4. 9. 17:08
alert 메서드 import React from 'react' import { Alert, SafeAreaView, Button } from 'react-native' export default function App() { return( Alert.alert('home pressed.','message')} /> ) } 실행결과 터치블 코어 컴포넌트 import React from 'react' import { Alert, SafeAreaView, Button } from 'react-native' import { TouchableOpacity, TouchableHighlight, Text } from 'react-native' const onPress = () => Alert.alert('home ..
-
react-native를 시작하면서/window 개발환경 설정/오류 해결_2app/react-native 2022. 4. 6. 16:38
https://hwantech.tistory.com/108 react-native를 시작하면서/window 개발환경 설정/오류 해결_1 react-native는 전용 툴이 없기 때문에 만만히 보면 절대 절대 xxxxxxx ...... javascript , vue 때고 나서 하 나도 이제 좀 굳굳 ㅇㅈ? 했다가 된통당했다....(개발환경만 삽질 5일함) 우선 window 개발환경 설정 hwantech.tistory.com 이거 먼저 보고오세용 안 보고 오면 뭔 소린지 머름 머름 머름 - vs code 개발환경 설정 맨 밑에 네모 4개 눌러서 1. 한국어 언어팩 설치 2. c# 스크립트 설치 둘 다 했으면 타임스크립트 설치 위에 한국말 써져 있는 거 보면 터미널이라고 써져 있다 아님 ... 에 들어 있음 ..
-
react-native를 시작하면서/window 개발환경 설정/오류 해결_1app/react-native 2022. 4. 6. 16:06
react-native는 전용 툴이 없기 때문에 만만히 보면 절대 절대 xxxxxxx ...... javascript , vue 때고 나서 하 나도 이제 좀 굳굳 ㅇㅈ? 했다가 된통당했다....(개발환경만 삽질 5일함) 우선 window 개발환경 설정하면서 내가 느낀거, 오류 해결한거 끄적여 봄 우선 난 책은 do it! 리엑트 네이티브 책을 사용함(살꺼면 구글도서에서 ebook 으로 ㄱㄱ) https://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=349167930&gclid=CjwKCAjw0a-SBhBkEiwApljU0oTXCh5yzDrIZQf3DggXZXB6oQETnZNJoRNsnWrGhjrnRgpZ3Rn7gRoCO3gQAvD..