#2 React Native Navigation 번역 정보

#2 React Native Navigation 번역

본문

Screen API

이 API는 화면 구성 요소 컨텍스트에서 관련이 있습니다. 다른 화면을 푸시하고 팝업 화면을 표시하고 탐색기 스타일을 변경하는 등의 작업을 수행 할 수 있습니다.이 API에 대한 액세스는 prop을 통해 구성 요소로 전달되는 navigator 개체를 통해 사용할 수 있습니다.

push(params)

이 화면의 탐색 스택에 새 화면을 푸시합니다.


this.props.navigator.push({
  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
  title: undefined, // navigation bar title of the pushed screen (optional)
  titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
  animated: true, // does the push have transition animation or does it happen immediately (optional)
  backButtonTitle: undefined, // override the back button title (optional)
  backButtonHidden: false, // hide the back button altogether (optional)
  navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
  navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
});

pop(params = {})

이 화면의 탐색 스택에서 최상위 화면을 팝합니다.



this.props.navigator.pop({
  animated: true // does the pop have transition animation or does it happen immediately (optional)
});

popToRoot(params = {})

이 화면의 탐색 스택에서 루트까지 모든 화면을 팝합니다.


this.props.navigator.popToRoot({
  animated: true // does the pop have transition animation or does it happen immediately (optional)
});

resetTo(params)

화면의 탐색 스택을 새 화면으로 재설정합니다 (스택 루트가 변경됨).


this.props.navigator.resetTo({
  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
  title: undefined, // navigation bar title of the pushed screen (optional)
  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
  animated: true, // does the push have transition animation or does it happen immediately (optional)
  navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
  navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
});

showModal(params = {})

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


this.props.navigator.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)
  animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up')
});

dismissModal(params = {})

현재 모달을 닫습니다.



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

dismissAllModals(params = {})

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


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

showLightBox(params = {})

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


this.props.navigator.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 = {})

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


this.props.navigator.dismissLightBox();

handleDeepLink(params = {})

앱 내의 딥 링크를 트리거합니다. 화면에서 딥 링크 이벤트를 수신하는 방법에 대한 자세한 내용은 딥 링크를 참조하십시오.


this.props.navigator.handleDeepLink({
  link: "chats/2349823023" // the link string (required)
});

setOnNavigatorEvent(callback)

탐색 버튼 이벤트와 같은 탐색기 이벤트 처리기를 설정합니다. 이것은 일반적으로 컴포넌트 생성자에 들어갑니다.


// this.onNavigatorEvent will be our handler
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

setButtons(params = {})

네비게이터에서 동적으로 버튼을 설정합니다. 런타임 중에 버튼이 변경되지 않으면 아래의 "네비게이터에 버튼 추가"를 참조하여 정적 navigatorButtons = {...};을 사용하여 버튼을 추가하십시오.



this.props.navigator.setButtons({
  leftButtons: [], // see "Adding buttons to the navigator" below for format (optional)
  rightButtons: [], // see "Adding buttons to the navigator" below for format (optional)
  animated: true // does the change have transition animation or does it happen immediately (optional)
});

setTitle(params = {})

탐색 표시 줄 제목을 동적으로 설정하십시오. 런타임 중에 제목이 변경되지 않으면 화면이 정의/푸시 될 때 설정하십시오.



this.props.navigator.setTitle({
  title: "Dynamic Title" // the new title of the screen as appears in the nav bar
});

toggleDrawer(params = {})

사이드 메뉴 드로어를 가지고 있다고 가정 할 때 사이드 메뉴 드로어를 토글합니다.


this.props.navigator.toggleDrawer({
  side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
  animated: true, // does the toggle have transition animation or does it happen immediately (optional)
  to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
});

toggleTabs(params = {})

탭 표시 여부를 전환합니다 (탭 기반 앱에서만).


this.props.navigator.toggleTabs({
  to: 'hidden', // required, 'hidden' = hide tab bar, 'shown' = show tab bar
  animated: true // does the toggle have transition animation or does it happen immediately (optional)
});

setTabBadge(params = {})

탭 (모든 문자열 또는 숫자 값)에 배지를 설정하십시오.


this.props.navigator.setTabBadge({
  tabIndex: 0, // (optional) if missing, the badge will be added to this screen's tab
  badge: 17 // badge value, null to remove badge
});

switchToTab(params = {})

탭으로 전환합니다 (현재 선택한 탭으로 설정).


this.props.navigator.switchToTab({
  tabIndex: 0 // (optional) if missing, this screen's tab will become selected
});

toggleNavBar(params = {})

탐색 표시 줄의 표시 여부를 전환합니다.


this.props.navigator.toggleNavBar({
  to: 'hidden', // required, 'hidden' = hide navigation bar, 'shown' = show navigation bar
  animated: true // does the toggle have transition animation or does it happen immediately (optional). By default animated: true
});

Styling the navigator

navigatorStyle 객체를 전달하여 탐색기 모양 및 동작 스타일을 지정할 수 있습니다. 이 객체는 화면이 처음 생성 될 때 전달 될 수 있습니다. 화면 구성 요소에 정적 navigatorStyle = {};을 설정하여 화면별로 정의 할 수 있습니다. 화면을 누를 때 무시 될 수 있습니다.

화면 스타일을 지정하는 가장 쉬운 방법은 static navigatorStyle = {};을 화면의 React 컴포넌트 정의에 추가하는 것입니다.


export default class StyledScreen extends Component {
  static navigatorStyle = {
    drawUnderNavBar: true,
    navBarTranslucent: true
  };
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={{flex: 1}}>...</View>
     );
  }

Style object format


{
  navBarTextColor: '#000000', // change the text color of the title (remembered across pushes)
  navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
  navBarButtonColor: '#007aff', // change the button colors of the nav bar (eg. the back button) (remembered across pushes)
  navBarHidden: false, // make the nav bar hidden
  navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
  navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
  navBarTransparent: false, // make the nav bar transparent, works best with drawUnderNavBar:true
  navBarNoBorder: false, // hide the navigation bar bottom border (hair line). Default false
  drawUnderNavBar: false, // draw the screen content under the nav bar, works best with navBarTranslucent:true
  drawUnderTabBar: false, // draw the screen content under the tab bar (the tab bar is always translucent)
  statusBarBlur: false, // blur the area under the status bar, works best with navBarHidden:true
  navBarBlur: false, // blur the entire nav bar, works best with drawUnderNavBar:true
  tabBarHidden: false, // make the screen content hide the tab bar (remembered across pushes)
  statusBarHideWithNavBar: false // hide the status bar if the nav bar is also hidden, useful for navBarHidden:true
  statusBarHidden: false, // make the status bar hidden regardless of nav bar state
  statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
  collapsingToolBarImage: "http://lorempixel.com/400/200/", // Collapsing Toolbar image. Android only
  collapsingToolBarImage: require('../../img/topbar.jpg'), // Collapsing Toolbar image. Either use a url or require a local image. Android only
  collapsingToolBarCollapsedColor: '#0f2362' // Collapsing Toolbar scrim color. Android only
}

참고 : 상태 표시 줄과 관련된 스타일을 설정하는 경우 Xcode>project>Info.plist에서 속성보기 컨트롤러 기반 상태 표시 줄 모양이 예로 설정되어 있는지 확인하십시오.

지원되는 모든 스타일이 여기에 정의됩니다. 모든 스타일을 보여주는 예제 프로젝트가 있습니다.

공감
0

#2 React Native Navigation 번역 > 앱개발

앱개발