ホームページ > 記事 > ウェブフロントエンド > React Native での NavigatorIOS コンポーネントの簡単な使い方チュートリアル

React Native での NavigatorIOS コンポーネントの簡単な使い方チュートリアル

小云云オリジナル: 2018-01-29 09:09:041258ブラウズ

この記事では、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) 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 &#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>
  )
 }
}

2番目のシーン

export default class NextScene extends Component {

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

React Native での NavigatorIOS コンポーネントの簡単な使い方チュートリアル

関連記事