#1 React Native Navigation 번역 정보

#1 React Native Navigation 번역

본문

https://github.com/wix/react-native-navigation/wiki

앱 차원에서 쉬운 크로스 플랫폼 인터페이스로 100 % 기본 네비게이션을 지원합니다. iOS의 경우,이 패키지는 react-native-controllers에 대한 래퍼이지만 단순한보다 추상화 된 API를 제공합니다. 이 추상 API는 현재 진행중인 Android 솔루션과 통합됩니다. 또한 사용하는 경우 redux를 완벽하게 지원합니다.

Overview

Why use this package

React Native 코어에서 빠진 주요한 것들 중 하나는 완벽한 네이티브 네비게이션입니다. 네비게이션에는 nav bars, tab bars 및 side menu drawers과 같은 중요 구성 요소가 있는 응용 프로그램의 전체 골격이 포함됩니다.

최고의 기본 응용 프로그램과 동등한 사용자 경험을 제공하려는 경우 JS 기반 구성 요소에서 위변조를 시도하지 않아도됩니다.

예를 들어,이 패키지는 버려진 네이티브 NavigatorIOS를 유지 보수가 용이 한 JS 기반 솔루션으로 대체합니다. 자세한 내용은 여기에서 심층적 인 토론을 참조하십시오.

React-native-navigation을 기반으로 프로젝트를 빠르게 시작하려면 부트 스트랩 프로젝트를 복제하십시오.

Usage

이 글을 읽는 것이 마음에 들지 않는다면 완전히 작동하는 예제 프로젝트로 건너 뛰십시오.

example - 이 패키지의 모범 사례 사용을 보여주는 프로젝트 예제. 다양한 탐색 기능을 표시합니다.
redux-example (deprecated) - redux 기반 프로젝트에서이 패키지를 사용하는 것이 가장 좋습니다.

참고 : redux 예제는 더 이상 사용되지 않습니다. 우리가 예제 프로젝트를 유지할 수 있는 충분한 시간과 자원이 없었기 때문에 우리는 redux 예제를 유지하는 것을 중단하기로 결정했습니다. 이것은 redux가 react-native-navigation에 사용될 수 없다는 것을 의미하지 않습니다. 사실 우리는 Wix 앱에서 redux를 사용합니다. RNN과 함께 redux를 사용하는 작업 예제 프로젝트의 경우 JuneDomingo/movieapp를 참조하십시오.

Step 1 - Change the way your app starts

일반적으로 index.ios.js에 포함됩니다.


import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});

Step 2 - Register all of your screen components

탭에 배치하고 탐색 스택으로 밀어 넣거나 현재 모달로 등록해야 하는 모든 화면을 등록해야 합니다. screen/index.js와 같은 중앙 위치에서 이 작업을 수행하는 것이 좋습니다.

참고 : 화면이 다른 패키지와 번들 될 수 있으므로 등록 된 이름은 고유해야 합니다! packageName.ScreenName과 같은 네임 스페이스 규칙을 따릅니다.



import { Navigation } from 'react-native-navigation';

import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import PushedScreen from './PushedScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
}

Step 3 - That's it

새로운 화면을 기존 화면 위로 푸시하는 것과 같은 탐색 동작을 원할 경우 Screen API를 살펴보십시오. 다음과 같이 보일 것입니다 :



// this would go inside the Component implementation of one of your screens, like FirstTabScreen.js
this.props.navigator.push({
  screen: 'example.PushedScreen',
  title: 'Pushed Screen'
});

Top Level API

`Navigation`



import { Navigation } from 'react-native-navigation';

`registerComponent(screenID, generator, store = undefined, Provider = undefined)`

앱의 모든 화면 구성 요소는 고유 한 이름으로 등록되어야합니다. 구성 요소 자체는 React.Component를 확장하는 전통적인 React 구성 요소입니다.



// not using redux (just ignore the last 2 arguments)
Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);

// using redux, pass your store and the Provider object from react-redux
Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen, store, Provider);

`startTabBasedApp(params)`

앱 루트를 iOS의 매우 일반적인 패턴 인 여러 탭 (일반적으로 2-5) (예 : Facebook 앱 또는 iOS 주소록 앱)을 기반으로하는 앱으로 변경하십시오. 모든 탭에는 네이티브 nav bar가 있는 자체 네비게이션 스택이 있습니다.



Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One', // tab label as appears under the icon in iOS (optional)
      screen: 'example.FirstTabScreen', // unique ID registered with Navigation.registerScreen
      icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
      selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
      title: 'Screen One', // title of the screen as appears in the nav bar (optional)
      navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
      navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'),
      title: 'Screen Two'
    }
  ],
  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
    tabBarButtonColor: '#ffff00', // optional, change the color of the tab icons and text (also unselected)
    tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
    tabBarBackgroundColor: '#551A8B' // optional, change the background color of the tab bar
  },
  drawer: { // optional, add this if you want a side menu drawer in your app
    left: { // optional, define if you want a drawer from the left
      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
    },
    right: { // optional, define if you want a drawer from the right
      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
    },
    disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
  },
  passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
  animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});

`startSingleScreenApp(params)`

앱 루트를 iOS 캘린더 또는 설정 앱과 같은 단일 화면을 기반으로하는 앱으로 변경합니다. 화면에는 네이티브 nav bar가 있는 자체 네비게이션 스택이 표시됩니다.



Navigation.startSingleScreenApp({
  screen: {
    screen: 'example.WelcomeScreen', // unique ID registered with Navigation.registerScreen
    title: 'Welcome', // title of the screen as appears in the nav bar (optional)
    navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
    navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
  },
  drawer: { // optional, add this if you want a side menu drawer in your app
    left: { // optional, define if you want a drawer from the left
      screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
    },
    right: { // optional, define if you want a drawer from the right
      screen: 'example.SecondSideMenu' // unique ID registered with Navigation.registerScreen
    },
    disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
  },
  passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
  animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
});

`showModal(params = {})`

화면을 모달로 표시합니다.



Navigation.showModal({
  screen: "example.ModalScreen", // unique ID registered with Navigation.registerScreen
  title: "Modal", // title of the screen as appears in the nav bar (optional)
  passProps: {}, // simple serializable object that will pass as props to the modal (optional)
  navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
  navigatorButtons: {}, // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
});

`dismissModal(params = {})`

현재 모달을 닫습니다.



Navigation.dismissModal({
  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
});

`dismissAllModals(params = {})`

동시에 현재 모달을 모두 닫습니다.



Navigation.dismissAllModals({
  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
});

`showLightBox(params = {})`

화면을 라이트 박스로 표시합니다.



Navigation.showLightBox({
  screen: "example.LightBoxScreen", // unique ID registered with Navigation.registerScreen
  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
  style: {
    backgroundBlur: "dark", // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
    backgroundColor: "#ff000080" // tint color for the background, you can specify alpha here (optional)
  }
});

`dismissLightBox(params = {})`

현재 라이트 박스를 닫습니다.



Navigation.dismissLightBox();

`registerScreen(screenID, generator)`

이 함수는 직접 사용하지 않으려는 내부 함수입니다. 화면 구성 요소가 Screen을 직접 확장하는 경우 ( import { Screen } from 'react-native-navigation') registerComponent 대신 registerScreen을 사용하여 직접 등록 할 수 있습니다. registerComponent를 사용하는 주된 이점은 일반 화면 구성 요소를 화면과 자동으로 묶는 것입니다.



Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);

공감
0

#1 React Native Navigation 번역 > 앱개발

앱개발