[Vue Native] NativeBase - navigator

[Vue Native] NativeBase - navigator

Vue NativeBase를 이용한 header navigator 메모 포스팅..

이 포스팅에서 쓰이는 component는 요종도..

1. src/index.vue

- template 구성

- NativeBase에서 제공하는 필요한 부분을 import시켜준다

import { createAppContainer, createStackNavigator, createDrawerNavigator } from "vue-native-router"; import { Root } from "native-base"; import HomeScreen from "./pages/home/index.vue"; import SideBarScreen from "./pages/sidebar/index.vue";

- 테스트로 추가해본 메뉴 구성

import AnatomyScreen from "./pages/anatomy/index.vue"; import RaisonScreen from "./pages/raison/index.vue";

const Drawer = createDrawerNavigator( { Home: { screen: HomeScreen }, Anatomy: { screen: AnatomyScreen }, Raison: { screen: RaisonScreen }, }, { initialRouteName: "Home", contentOptions: { activeTintColor: "#e91e63" }, contentComponent: SideBarScreen } ); const AppNavigation = createAppContainer( createStackNavigator( { Drawer: { screen: Drawer }, }, { initialRouteName: "Drawer", headerMode: "none" } ) ); export default { components: { Root, AppNavigation } };

Drawer에 createDrawerNavigator을 담아주고 구성요소를 넣어보자

- Home, Anatomy, Raison 이라는 name명으로 잡아준다. 리스트 목록이라고 보면 될듯하다

- initialRouteName 는 첫화면 route를 표시해주는 것같다

추후 위에서 import한 SideBarScreen에서 name 명을 동일하게 해줘야하니 신경쓰도록하자

이제 네비게이션을 불러올 header가있는 src/pages/home/index.vue를 보도록하자

2.src/pages/home/index.vue

Header21 export default { props: { navigation: { type: Object } }, data() { return { }; }, methods: { handleLetGoBtnPress() { this.navigation.openDrawer(); } } };

연결된 디바이스에서 확인한 모오습

햄버거 메뉴를 눌렀을때 props로 넘겨받은 navigation의 openDrawer를 불러오는데 이부분은 좀더 찾아봐야할거같다..

3.src/pages/sidebar

기존 NativeBase에서 제공하는 sidebar를 긁어와서 사용함 필요없는부분은 빼면 될듯하다..

datas:[ ] 내에 name, route, icon, bg 등을 설정해주면 된다.

{{ data.name }} {{ `${data.types} Types` }} import { Dimensions, Platform } from "react-native"; import drawerCover from "../../../assets/drawer-cover.png"; import drawerImage from "../../../assets/logo-kitchen-sink.png"; const deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; export default { props: { navigation: { type: Object } }, data() { return { drawerCover, drawerImage, stylesObj: { drawerCoverObj: { height: deviceHeight / 3.5 }, drawerImageObj: { left: Platform.OS === "android" ? deviceWidth / 10 : deviceWidth / 9, top: Platform.OS === "android" ? deviceHeight / 13 : deviceHeight / 12, resizeMode: "cover" }, badgeText: { fontSize: Platform.OS === "android" ? 11 : 13, marginTop: Platform.OS === "android" ? -3 : 0, fontWeight: "400" } }, datas: [ { name: "eastarm", route: "Anatomy", icon: "phone-portrait", bg: "#C5F442" }, { name: "raison", route: "Raison", icon: "phone-portrait", bg: "#000000" } ] }; }, methods: { handleListItemClick(dataObj) { this.navigation.navigate(dataObj.route); } } }; .sidebar-content-wrapper { flex: 1; background-color: #fff; } .drawer-cover { flex: 1; align-self: stretch; position: relative; margin-bottom: 10; } .drawer-image { align-self: center; position: absolute; height: 75; width: 210; } .list-item-badge-container { border-radius: 3; height: 25; width: 72; } .list-item-badge-text { /* font-weight: 400; // not-working */ /* font-weight: bold; // working */ text-align: center; }

일단 간단하게 포스팅후 다시 정리를 해봐야 할듯하다..

참고 사이트

- https://docs.nativebase.io/Components.html#header-def-headref

- https://vue-native.io/docs/vue-native-router.html#Basic-navigation-with-a-stack-navigator

from http://dh5032.tistory.com/41 by ccl(A) rewrite - 2020-03-13 19:20:16

댓글

댓글 쓰기

이 블로그의 인기 게시물

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)

[React] - 18) 프로젝트 빌드하기(+코드 스플리팅) 안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으로 yarn create react-app으로 프로젝트를 만들면 로고 이미지 파일이 포함되었죠? 그런 이미지, 사운드 같은 정적 파일이 있다면 해당 파일을 위한 경로도 생성됩니다. 실제로 저 static 폴더를 열어 보면, js, css로 나뉘어 수많은 자바스크립트 파일이 하나로 합쳐지고, css 파일들도 하나로 합쳐지게 됩니다. 이러한 작업을 해주는 것이, 리액트를 처음 사용할 때 만났던 웹팩이라는 것인데요. 웹팩 설정에서 Chunks 기능이 작동하여 여러 파일들을 따로 분리시켜 효율적으로 캐싱해 줍니다. 실제로 static을 열어보면 자주 바뀌는 코드, main 코드 등등이 알아서 나뉘어 효율적으로 분리되어 있을 것입니다. 이렇게 파일을 분리하는 작업을 '코드 스플리팅'이라고 합니다. 지금은 CRA(create-react-app)으로 만들어진 아주아주 작고 기본적인 코드만 빌드되었기 때문에 파일의 크기가 아주 작습니다만, 프로젝트의 규모가커지면 A페이지에서 B,C,D 페이지에서 사용할 정보까지 모두 로드하면서 파일 크기가 ...
자세한 내용 보기

단위 테스트 환경 구축

단위 테스트 환경 구축 개발 노트/vue.js 단위 테스트 환경 구축 create-nuxt-app로 프로젝트를 설정할 때 단위 테스트 프레임워크를 선택할 수 있다. AVA, Jest 중에 선택할 수 있는데 React.js로 개발했을 때 사용한 Jest를 사용한 경험이 있었기 때문에 Jest로 선택했다. 참고로 Jest는 facebook에서 만들었다. 선택하지 않은 경우에는 테스트 관련 모듈을 수동으로 설치 및 설정해줘야 한다. 아래 모듈을 --save-dev로 추가하자. @vue/test-utils : vue 코드를 단위 테스트할 때 필요한 유틸을 제공한다. jest : 단위 테스트 작성에 필요한 matcher, teardown 등을 제공한다. mock, spy 방식도 안내하고 있으니 공식 사이트 를 방문해서 꼭 보도록 하자. vue-jest , babel-jest : vue, ES6 문법으로 작성된 코드를 jest 수행 시 변환해주는 플러그인 모듈입니다. 그리고 package.json에 scripts를 추가하자. "scripts": { ... "test": "jest" }, jest.config.js 파일을 생성한 후 아래 설정을 추가 하자. module.exports = { moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', '^vue$': 'vue/dist/vue.common.js' }, moduleFileExtensions: ['js', 'vue', 'json'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest' }, collectCoverage: true, col...
자세한 내용 보기

React에서 웹팩 설치하기

React에서 웹팩 설치하기 create-react-app을 하면 자동으로 웹팩 설정을 해주기 때문에 웹팩을 그다지 신경쓰지 않았지만 그래도 웹팩을 설치하는 방법을 알아야 한다. 세부적인 컨트롤과 개인화, 오류 수정 등의 문제가 존재하기 때문이다. 우선, 웹팩을 다루기 위해서는 node를 어느 정도 알아야 한다. React할 때 node를 알아야 한다는 이유가 웹팩을 활용하기 위해서이다. from http://darrengwon.tistory.com/177 by ccl(A) rewrite - 2020-03-21 05:20:13
자세한 내용 보기