Ground17's Playground

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다. https://reactnavigation.org/docs/getting-started 모든 과정을 시작하기 앞서, 아래 패키지들을 설치해줍니다. npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 만약 tab view와 stack view도 사용한다면 아래 패키지들도 추가로 설치해줍니다. npm install @react-navigation/bottom-tabs @react-navigation/stack 아래는 기본적인 화면을 구성하는 코드입니다.(function 형식보단 class 형식이 더 많습니다) App.js import 'react-native-gesture-handler' ; import { NavigationContainer } from '@react-navigation/native' ; import { createStackNavigator } from '@react-navigation/stack' ; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' ; import Icon from 'react-native-vector-icons/MaterialIcons' ; import Login from './assets/screens/Login' ; const Stack = createStackNavigator (); const Tab = createBottomT...

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다. https://api.flutter.dev/flutter/widgets/Navigator-class.html 아래는 기본적인 화면을 구성하는 코드입니다. class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build (BuildContext context) { return MaterialApp ( /// home: MyHomePage (title: '카트라이더 전적 검색 17%' ) , ) ; } } class MyHomePage extends StatefulWidget { MyHomePage({Key key , this . title }) : super (key: key) ; final String title ; static void restartApp (BuildContext context) { context.findAncestorStateOfType<_MyHomePageState>().restartApp() ; } @override _MyHomePageState createState () => _MyHomePageState () ; } class _MyHomePageState extends State<MyHomePage> { /// } 그리고 함수를 하나 만들어서 그 안에 다른 화면으로 이동하기 위해 아래와 같은 형식으로 코드를 입력해줍니다. Navigator. push ( context , MaterialPageRoute (builder: (context) => DetailApp (id: get. accessId ,...