티스토리 뷰
* window 환경 기준
관리자모드로 cmd 실행
npm i -g create-react-native-app
- 설치
일반 cmd 실행
create-react-native-app reactNativeNavigation
- reactNativeNavigation 이름의 RN 프로젝트 생성
cd reactNativeNavigation
- 만든 프로젝트로 이동
npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
- module 설치.
----여기서부터 코드----
//App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import Blog from './screens/Blog';
import BlogDetails from './screens/BlogDetails';
const Stack = createStackNavigator();
function NavStack() {
return (
<Stack.Navigator
screenOptions={{
headerTitleAlign: 'center',
headerStyle: {
backgroundColor: '#621FF7',
},
headerTintColor: '#fff',
headerTitleStyle :{
fontWeight: 'bold',
},
}}
>
<Stack.Screen
name="Home"
component={Home}
options={{ title: 'Home' }}
/>
<Stack.Screen
name="Blog"
component={Blog}
options={{ title: 'Blog' }}
/>
<Stack.Screen
name="BlogDetails"
component={BlogDetails}
options={{ title: 'Blog Detail' }}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<NavStack />
</NavigationContainer>
);
}
//////////////////////////////////////////////////////////////////////
// screens/Home.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
class Home extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home screen</Text>
<Button
title="Go to Blog Details"
onPress={() => {
this.props.navigation.navigate('BlogDetails', {
postId: 3006,
otherParam: 'Pass whatever you want here',
});
}}
/>
</View>
);
}
}
export default Home;
//////////////////////////////////////////////////////////////////////
// screens/Blog.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
class Blog extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Blog screen</Text>
</View>
);
}
}
export default Blog;
//////////////////////////////////////////////////////////////////////
// screens/BlogDetails.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
class BlogDetails extends Component {
render() {
const { postId, otherParam } = this.props.route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Post id is: {postId}</Text>
<Text>{otherParam}</Text>
<Button
title="Go to Blog"
onPress={() => {
this.props.navigation.navigate('Blog');
}}
/>
</View>
);
}
}
export default BlogDetails;
//////////////////////////////////////////////////////////////////////
App.js에서 screen들을 정의
Home.js에서 BlogDetails로 화면전환하며 postId, otherParam 데이터 전달.
BlogDetails 에서 postId, otherParam 데이터 받아 텍스트로 띄워준다.
출처 https://www.positronx.io/react-native-navigation-example-tutorial/
React Native Navigation v5 Example Tutorial - positronX.io
This is a step by step comprehensive React Native Navigation v5 tutorial. In this tutorial, we will learn how to implement Stack Navigation in React Native app using Stack Navigator. Navigation in React Native is easy to implement, all thanks goes to Navig
www.positronx.io
'React Native' 카테고리의 다른 글
react i18n 화폐 단위 설정 (0) | 2021.04.16 |
---|---|
백그라운드 플로팅 윈도우 버튼.. (0) | 2021.01.28 |
react native spannableText 특정 텍스트에 색칠하기.. (0) | 2020.08.10 |
google map polyline direction 여러 라인 보여주기. (0) | 2020.07.20 |
React Native 함수형 코드를 클래스형 코드로 변경 / State에 대한 설명 (0) | 2020.07.02 |
- Total
- Today
- Yesterday
- 명령어
- ubunut android
- https://medium.com/@limgyumin/%EC%BD%94%ED%8B%80%EB%A6%B0-%EC%9D%98-apply-with-let-also-run-%EC%9D%80-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80-4a517292df29
- mongo db
- 클래스형 코드
- 자바
- 귀찮아;;
- 구글 맵 선그리기
- spannableText
- 차번호 정규식
- react native state
- insert
- 안드로이드
- ubunut 설치 link
- text 부분 색 칠하기
- adb 환경변수
- 구글 맵 경로 그리기
- 함수형 코드
- nosql
- MongoDB
- not starting .bash_profile
- React Native
- not found adb
- 데이터베이스
- rn
- Android
- 차번호 정규표현식
- https://hwan-shell.tistory.com/244
- mac android
- not working adb
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |