집 > 기사 > 웹 프론트엔드 > React Native의 NavigatorIOS 구성 요소(자세한 튜토리얼 설명)

React Native의 NavigatorIOS 구성 요소(자세한 튜토리얼 설명)

亚连원래의: 2018-06-09 11:26:441720검색

이 글에서는 주로 React Native에서 NavigatorIOS 컴포넌트를 간단하고 자세하게 활용하는 방법을 소개하고 참고하겠습니다.

1. NavigatorIOS 구성요소 소개

1. 구성요소 설명

NavigatorIOS를 사용하면 애플리케이션의 탐색(라우팅) 기능, 즉 뷰 간 전환과 앞으로 및 뒤로 전환을 구현할 수 있습니다. 그리고 페이지 상단에 탐색 모음이 있습니다(숨겨질 수 있음).

NavigatorIOS 구성 요소는 본질적으로 UIKit 탐색을 위한 래퍼입니다. NavigatorIOS를 사용하여 경로를 전환하는 것은 실제로 UIKit의 탐색을 호출하는 것입니다.

NavigatorIOS 구성 요소는 iOS 시스템만 지원합니다. React Native는 iOS와 Android 모두에 공통적인 탐색 구성 요소인 Navigator도 제공합니다. 이에 대해서는 나중에 이야기합시다.

2, 컴포넌트 속성

(1) barTintColor: 네비게이션 바의 배경색
(2)initialRoute: 라우팅을 초기화하는데 사용됩니다. 매개변수 객체의 다양한 속성은 다음과 같습니다.

{
 component: function, //加载的视图组件
 title: string, //当前视图的标题
 passPros: object, //传递的数据
 backButtonIcon: Image.propTypes.source, // 后退按钮图标
 backButtonTitle: string, //后退按钮标题
 leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
 leftButtonTitle: string, //左侧按钮标题
 onLeftButtonPress: function, //左侧按钮点击事件
 rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
 rightButtonTitle: string, //右侧按钮标题
 onRightButtonPress: function, //右侧按钮点击事件
 wrapperStyle: [object Object] //包裹样式
}

(3) itemWrapperStyle: 각 페이지의 배경색 설정 등 각 항목의 스타일을 사용자 정의합니다.
(4) NavigationBarHiddent: true인 경우 탐색 모음을 숨깁니다.
(5)shadowHidden: true인 경우 그림자가 숨겨집니다.
(6) TintColor: 탐색 모음에 있는 버튼의 색상입니다.
(7) titleTextColor: 탐색 모음의 글꼴 색상입니다.
(8) 반투명: true인 경우 탐색 모음이 반투명합니다.

3, 컴포넌트 메소드

컴포넌트 뷰가 전환되면 네비게이터가 속성 객체로 전달됩니다. this.props.navigator를 통해 navigator 객체를 얻을 수 있습니다. 이 객체의 주요 메소드는 다음과 같습니다.
(1) push(route): 새 페이지(보기 또는 경로)를 로드하고 해당 페이지로 라우팅합니다.
(2)pop(): 이전 페이지로 돌아갑니다.
(3) popN(n): 한 번에 N 페이지를 반환합니다. N=1이면 pop() 메서드의 효과와 동일합니다.
(4)replace(route): 현재 경로를 바꿉니다.
(5) replacementPrevious(route): 이전 페이지의 뷰를 교체하고 다시 돌아옵니다.
(6) ResetTo(route): 최상위 경로를 교체하고 롤백합니다.
(7)popToTop(): 상위 뷰로 돌아갑니다.

2. 사용 예

NavigatorIOS는 React Native와 함께 제공되는 탐색 구성 요소입니다.

첫 번째 장면 초기화

import PropTypes from &#39;prop-types&#39;;
import React, { Component } from &#39;react&#39;;
import { NavigatorIOS, Text } from &#39;react-native&#39;;
import { NextScene } from &#39;react-native&#39;;

export default class NavigatorIOSApp extends Component {
 render() {
  return (
   <NavigatorIOS
    initialRoute={{
     component: MyScene,
     title: &#39;初始化第一个场景&#39;,
    }}
    style={{flex: 1}}
   />
  );
 }
}

class MyScene extends Component {
 static propTypes = {
  title: PropTypes.string.isRequired,
  navigator: PropTypes.object.isRequired,
 }

 _onForward = () => {
  this.props.navigator.push({
   component:NextScene
   title: &#39;第二个场景&#39;
  });
 }

 render() {
  return (
   <View>
    <Text>Current Scene: { this.props.title }</Text>
    <TouchableHighlight onPress={this._onForward}>
     <Text>前往下一个场景</Text>
    </TouchableHighlight>
   </View>
  )
 }
}

두 번째 장면

export default class NextScene extends Component {

 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

React Native의 NavigatorIOS 구성 요소(자세한 튜토리얼 설명)

관련 기사