집 >웹 프론트엔드 >JS 튜토리얼 >NavigatorIOS 구성 요소 사용에 대한 자세한 설명

NavigatorIOS 구성 요소 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-03-23 13:21:042054검색

이번에는 NavigatorIOS컴포넌트 사용법에 대해 자세히 설명해 드릴게요. 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 'prop-types';
import React, { Component } from 'react';
import { NavigatorIOS, Text } from 'react-native';
import { NextScene } from 'react-native';
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: '第二个场景'
  });
 }
 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>
  )
 }
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!