[RN 5-1 프로젝트 준비]
2020. 2. 25. 23:28ㆍReact Native/React Native 영화 소개 앱
반응형
네비게이션
앱 리소스(앱 아이콘/스플래시 스크린 이미지)
프로젝트 생성
react-native init MovieApp
타입 스크립트, 스타일 컴포넌트, 바벨 플러그인 설치
cd MovieApp/
npm install --save styled-components
npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import
IDE 를 실행하여 프로젝트 오픈하여 타입스크립트 생성 및 설정 : tsconfig.json
{
"compilerOptions": {
"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"
]
}
컴포넌트 추가 절대경로 방식 : babel.config.js 수정
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'babel-plugin-root-import',
{
rootPathPrefix: '~',
rootPathSuffix: 'src',
},
],
],
};
js 소스코드 통합관리
1). src 폴더 생성 후
2). App.js 파일을 App.tsx로 이름을 변경하여 src 폴더로 이동시킨다.
3). 타입스크립트와 Styled 컴포넌트를 사용해서 ./src/App.tsx 파일을 수정
더보기
import React, {Fragment} from 'react';
import {StatusBar, SafeAreaView} 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 (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView contentInsetAdjustmentBehavior="automatic">
<Header />
<Body>
<SectionContainer>
<SectionDescription>Step One</SectionDescription>
<SectionDescription>
Edit <HighLight>App.js</HighLight> to change this screen and
then come back to see your edits.
</SectionDescription>
</SectionContainer>
<SectionContainer>
<SectionDescription>See Your Changes</SectionDescription>
<SectionDescription>
<ReloadInstructions />
</SectionDescription>
</SectionContainer>
<SectionContainer>
<SectionDescription>Debug</SectionDescription>
<SectionDescription>
<DebugInstructions />
</SectionDescription>
</SectionContainer>
<SectionContainer>
<SectionDescription>Learn More</SectionDescription>
<SectionDescription>
Read the docs to discover what to do next:
</SectionDescription>
</SectionContainer>
<LearnMoreLinks />
</Body>
</ScrollView>
</SafeAreaView>
</Fragment>
);
};
export default App;
인덱스 수정
index.js
...
import App from '~/App';
...
AsyncStorage 설치 및 설정
npm install --save @react-native-community/async-storage반응형