리액트 네이티브 (React Native, RN)
React Native | Navigation Stack 화면 전환 구현
Valar
2021. 6. 17. 15:27
반응형
아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다.
https://kitty-geno.tistory.com/47?category=956753
@react-navigation/native 설치
npm install @react-navigation/native
React Navigation 를 사용하기 위한 라이브러리 설치
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
#빌드시 react-native-reanimated-65-jsc.aar를 못찾을경우 아래로 설치
npm install react-native-reanimated@2.3.0-alpha.2 react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Stack 사용을 위해 설치
npm install @react-navigation/stack
설치가 완료되면 iOS 폴더에 가서 아래에 명령어를 실행
IOS 프로젝트 경로에서
pod install 또는 npx pod-install ios
App.js
Event)
onPress - 일반 TouchEvent
onLongPress - 길게 누르고 있을때만 발생하는 TouchEvent
onPressIntouch - 올려놓는 순간 발생하는 TouchEvent
onPressOuttouch - 떼는 순간 발생하는 TouchEvent
import React from 'react';
import type {Node} from 'react';
import {
Text,
View,
TouchableOpacity,
Button
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function Home({navigation}) {
return (
<TouchableOpacity style={{ flex: 1 }} onPress={() => navigation.navigate('MyPage')}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Go to the Screen Touch!</Text>
<Button
onPress={() => navigation.navigate('MyPage')}
title="Go to the Button Press!">
</Button>
</View>
</TouchableOpacity>
);
}
function MyPage() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>MyPage</Text>
</View>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{headerShown:false}} // show, hide header title
/>
<Stack.Screen
name="MyPage"
component={MyPage}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
↓
#Reference
https://reactnavigation.org/docs/getting-started
반응형