ホームページ ウェブフロントエンド jsチュートリアル NavigatorIOS コンポーネントの使用方法の詳細な説明

NavigatorIOS コンポーネントの使用方法の詳細な説明

Mar 23, 2018 pm 01:21 PM
コンポーネント 詳しい説明

今回は、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) tinyColor: ナビゲーション バーのボタンの色。
(7) titleTextColor: ナビゲーション バーのフォントの色。
(8) translucent: true の場合、ナビゲーション バーは半透明になります。

3、コンポーネントメソッド

コンポーネントビューを切り替えると、ナビゲーターがプロパティオブジェクトとして渡されます。 this.props.navigator を通じて navigator オブジェクトを取得できます。このオブジェクトの主なメソッドは次のとおりです:

(1) Push(route): 新しいページ (ビューまたはルート) をロードし、そのページにルーティングします。
(2)pop(): 前のページに戻ります。
(3) PopN(n): 一度に N ページを返します。 N=1の場合、pop()メソッドの効果と同等になります。
(4)replace(route): 現在のルートを置き換えます。
(5) replacePrevious(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: '初始化第一个场景',
    }}
    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>
  )
 }
}
ログイン後にコピー
2 番目のシーン

export default class NextScene extends Component {
 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}
ログイン後にコピー
この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

画像の上位 N 個のカラー値を取得するための JS メソッド

render メソッドを使用したグラフィックスとテキストの詳細な説明

アプレットは .getImageInfo( ) 画像情報を取得します

以上がNavigatorIOS コンポーネントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法 Dec 28, 2023 pm 03:43 PM

Windows 10 旧バージョンコンポーネント DirectPlay のインストール方法

Win11での管理者権限の取得について詳しく解説 Win11での管理者権限の取得について詳しく解説 Mar 08, 2024 pm 03:06 PM

Win11での管理者権限の取得について詳しく解説

Oracle SQLの除算演算の詳細説明 Oracle SQLの除算演算の詳細説明 Mar 10, 2024 am 09:51 AM

Oracle SQLの除算演算の詳細説明

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について

PHPモジュロ演算子の役割と使い方を詳しく解説 PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHPモジュロ演算子の役割と使い方を詳しく解説

古いバージョンのwin10コンポーネントの設定を開く方法 古いバージョンのwin10コンポーネントの設定を開く方法 Dec 22, 2023 am 08:45 AM

古いバージョンのwin10コンポーネントの設定を開く方法

C言語学習ルートを詳細に分析 C言語学習ルートを詳細に分析 Feb 18, 2024 am 10:38 AM

C言語学習ルートを詳細に分析

Linuxシステムコールsystem()関数の詳細説明 Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linuxシステムコールsystem()関数の詳細説明

See all articles