로메오의 블로그

React 목록 프로젝트 생성 $ npx react-native init dragableList --template react-native-template-typescript React Native Reanimated 설치 $ npm install --save react-native-reanimated babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], }; plugins에 react-native-reaminated/plugin을 추가합니다. react-native-gesture-handler 설치 $ npm instal..

React 목록 App.tsx import React from 'react'; import {View, StyleSheet} from 'react-native'; import ChildScreen from './src/screens/ChildScreen'; const App = () => { const company = [ { country: 'Korea', company: 'Samsung', }, { country: 'USA', company: 'Apple', }, { country: 'Japan', company: 'Sony', }, ]; // 자식으로부터 호출됨 const onCalled = (param: string) => { console.log(param); }; return ( ); }; e..

React 목록 구글 Noto KR 폰트 다운로드 https://fonts.google.com/noto/specimen/Noto+Sans+KR Download family 로 폰트 다운로드합니다. StyleSheet에 적용 import { View, Text, StyleSheet } from 'react-native'; ... const HomeScreen = () => { ... return ( C ); }; export default HomeScreen; const styles = StyleSheet.create({ ... keypadNumber: { ... fontFamily: 'Noto Sans KR', }, ... }); font를 인지하지 못합니다. iOS 폰트 설정 $ mkdir src/io..

React 목록 모듈 설치 $ npm install redux $ npm install react-redux $ npm install redux-thunk 파일 생성 $ mkdir src $ mkdir src/redux $ mkdir src/screens $ touch src/redux/actions.tsx $ touch src/redux/reducer.tsx $ touch src/redux/store.tsx $ touch src/screen/HomeScreen.tsx $ touch src/screen/ChildScreen.tsx store.tsx import {legacy_createStore, combineReducers, applyMiddleware} from 'redux'; import thunk..

React 목록 import React, {useState} from 'react'; import {View, Text, StyleSheet, Button, ScrollView} from 'react-native'; interface State { name: string; } export default function App() { const [companies, setCompany] = useState([ {name: 'google'}, {name: 'samsung'}, {name: 'microsoft'}, {name: 'facebook'}, {name: 'apple'}, ]); const add = () => { const newCompany = {name: 'newCompany'}; setCompa..

React 목록 import React, {useState} from 'react'; import {View, Text, StyleSheet, Button} from 'react-native'; interface State { age: number; } export default function App() { const [count, setCount] = useState({age: 0}); const increase = () => { setCount({age: count.age + 1}); }; const descease = () => { setCount({age: count.age - 1}); }; return ( {count.age} ); } const styles = StyleSheet.create..

React 목록 import React, {Component} from 'react'; import {View, Text, StyleSheet, Button} from 'react-native'; interface State { name: string; age: 0; } export default class App extends Component { state: State = { name: '', age: 0, }; render() { return ( {this.state.name} { this.setState({ name: 'hello', }); }} /> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'c..

React 목록 react-native navigation 설치 $ npm install @react-navigation/native --save $ npm install react-native-screens react-native-safe-area-context --save $ npm install @react-navigation/native-stack --save $ npm install @react-navigation/bottom-tabs --save 파일생성 $ mkdir navigation $ mkdir navigation/screens $ touch navigation/MainNavigation.tsx $ touch navigation/screens/HomeScreen.tsx $ touch n..