블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형
1. React Native Navigation 사용하기
1.1. 프로젝트 생성
<python />$ react-native init corona
1.2. React Native Navigation 모듈 설치
<javascript />$ cd corona $ yarn add @react-navigation/native $ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view $ yarn add @react-navigation/stack
1.3. 샘플 코드 작성
<javascript />
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
1.4. 실행
<python />$ react-native run-android
2. Reference
https://reactnavigation.org/docs/getting-started
반응형
'Mobile > React Native' 카테고리의 다른 글
React Native, Android 개발을 위한 설치 및 환경 구축 (Mac OSX) (0) | 2020.12.22 |
---|---|
React Native XML 파싱 (0) | 2020.07.03 |
React Native Elements 적용하여 쉽게 앱 만들기 (0) | 2020.05.19 |
React Native 프로젝트 생성하기 (0) | 2020.05.19 |