React Navigation 5 Tutorials [ #2 ]
React Navigation 5 Tutorials
📌 튜토리얼을 따라한 프로젝트입니다!
화면 전환 예제
DetailsScreen 생성하기
HomeScreen을 복붙해서 이름을 DetailsScreen으로 바꾸어줍시다!
const DetailsScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
Home에 Button 추가하기
1. Button import 하기
import { SafeAreaView, StyleSheet, ScrollView, View, Text, Button, StatusBar,}
from 'react-native';
2. HomeScreen에 Button 추가하기
<Button
title="Go to details screen" />
3. App 컴포넌트에 Stack.Screen 추가하기
<Stack.Screen name="Details" component={DetailsScreen} />
4. Button에 onPress 이벤트 넣기
const HomeScreen = ({navigation}) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to details screen"
onPress={()=> navigation.navigate("Details")}/>
</View>
);
};
5. 결과보기
Details에 Button 추가하기
DetailsScreen 컴포넌트 코드 보기
const DetailsScreen = ({navigation}) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details screen Again"
onPress={() => navigation.navigate("Details")}/>
<Button
title="Go to Home screen"
onPress={() => navigation.navigate("Home")}/>
<Button
title="Go back"
onPress={() => navigation.goBack()}/>
<Button
title="Go to the first screen"
onPress={() => navigation.popToTop()}/>
</View>
);
};
결과보기
상단바 option 설정하기
App 컴포넌트 코드보기
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{
headerStyle:{
backgroundColor: '#009387',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
}
}}>
<Stack.Screen name="Home" component={HomeScreen} options={{
title : 'Overview'
}}/>
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
결과보기
Author And Source
이 문제에 관하여(React Navigation 5 Tutorials [ #2 ]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zopall0000/React-Navigation-5-Tutorials-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)