ホームページ >ウェブフロントエンド >jsチュートリアル >NavigatorIOS コンポーネントの使用方法の詳細な説明
今回は、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 サイトの他の関連記事を参照してください。