expo 내 이미지 설정
favicon.png : 48x48px
icon.png : 192x192px
splash.png : 1242x1242px
'Javascript > React' 카테고리의 다른 글
| Reactive-native 프로젝트 초기화 및 준비 과정 (0) | 2020.07.04 |
|---|
Javascript
- 앱 제작 이미지 사이즈 참조 2020.07.07
- Reactive-native 프로젝트 초기화 및 준비 과정 2020.07.04
앱 제작 이미지 사이즈 참조
2020. 7. 7. 11:17
Reactive-native 프로젝트 초기화 및 준비 과정
2020. 7. 4. 16:42
1. 앱 생성하기
react-native init AppName
2. npm 명령을 통한 styled-components 설치 및 저장하기
npm install --save styled-components
3. typescript 사용을 위한 명령어 사용
npm install --save typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import
4. tsconfig.json 파일 생성하기
react-native init AppName --template typescript
파일 내용은 아래와 같다.
{
"comilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": "./src",
"paths": {
"~/*": ["*"]
}
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
5. babel 환경 파일(babel.config.js) 수정하기
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
};
6. App.js 파일 수정하기
이름을 App.tsx로 변경 후 src로 이동
import React, {Fragment} from 'react';
import {SafeAreaView, StatusBar, Text} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Styled from 'styled-components/native';
const ScrollView = Styled.ScrollView`
background-color: ${Colors.lighter};
`;
const Body = Styled.View`
background-color: ${Colors.white};
`;
const sectionContainer = Styled.View`
margin-top: 32px;
padding-horizontal: 24px;
`;
const sectionDescription = Styled.Text`
margin-top: 8px;
font-size: 18px;
font-weight: 400;
color: ${Colors.dark};
`;
const HighLight = Styled.Text`
font-weight: 700;
`;
interface Props {}
const App = ({}: Props) => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Header />
<Body>
<Text>test</Text>
</Body>
</ScrollView>
</SafeAreaView>
</>
);
};
export default App;
export default App;
7. index.js 파일 수정하기
import App from '~/App';
'Javascript > React' 카테고리의 다른 글
| 앱 제작 이미지 사이즈 참조 (0) | 2020.07.07 |
|---|