【React Native】文件翻譯閱讀紀錄 - Components(組件) - NavigatorIOS

by - 上午9:00

Facebook Open Source React Native


NavigatorIOS

NavigatorIOS是UINavigationController的包裝器，使您能夠實現導航堆棧。它與使用UINavigationController的本機應用程序完全相同，從UIKit提供相同的動畫和行為。

 顧名思義，它僅適用於iOS。查看React Navigation以獲取JavaScript中的跨平台解決方案，或者查看這些組件中的任何一個以獲取本機解決方案：本機導航，react-native-navigation。

 要設置導航器，請為initialRoute prop提供路徑對象。路線對像用於描述您的應用導航到的每個場景。 initialRoute表示導航器中的第一條路線。

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { NavigatorIOS, Text, TouchableHighlight, View } from 'react-native';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

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

  _onForward = () => {
    this.props.navigator.push({
      title: 'Scene ' + nextIndex,
    });
  }

  render() {
    return (
      <View>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
      </View>
    )
  }
}
在此代碼中，導航器呈現initialRoute中指定的組件，在本例中為MyScene。該組件將接收路線道具和代表導航器的導航器道具。導航器的導航欄將呈現當前場景的標題“我的初始場景”。

 您可以選擇將passProps屬性傳遞給initialRoute。 NavigatorIOS將此作為道具傳遞給渲染組件：
initialRoute={{
  component: MyScene,
  title: 'My Initial Scene',
  passProps: { myProp: 'foo' }
}}
然後，您可以通過{this.props.myProp}訪問傳入的道具。

處理導航

要觸發導航功能（如推送或彈出視圖），您可以訪問導航器對象。該對像作為prop傳遞給NavigatorIOS呈現的任何組件。然後，您可以調用相關方法來執行所需的導航操作：
class MyView extends Component {
  _handleBackPress() {
    this.props.navigator.pop();
  }

  _handleNextPress(nextRoute) {
    this.props.navigator.push(nextRoute);
  }

  render() {
    const nextRoute = {
      component: MyView,
      title: 'Bar That',
      passProps: { myProp: 'bar' }
    };
    return(
      <TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
        <Text style={{marginTop: 200, alignSelf: 'center'}}>
          See you on the other nav {this.props.myProp}!
        </Text>
      </TouchableHighlight>
    );
  }
}
您還可以從NavigatorIOS組件觸發導航器功能：
class NavvyIOS extends Component {
  _handleNavigationRequest() {
    this.refs.nav.push({
      component: MyView,
      title: 'Genius',
      passProps: { myProp: 'genius' },
    });
  }

  render() {
    return (
      <NavigatorIOS
        ref='nav'
        initialRoute={{
          component: MyView,
          title: 'Foo This',
          passProps: { myProp: 'foo' },
          rightButtonTitle: 'Add',
          onRightButtonPress: () => this._handleNavigationRequest(),
        }}
        style={{flex: 1}}
      />
    );
  }
}
上面的代碼添加了一個_handleNavigationRequest私有方法，當按下右側導航欄項時，該方法將從NavigatorIOS組件調用。為了訪問導航器功能，對它的引用保存在ref prop中，稍後引用以將新場景推送到導航堆棧中。

 導航欄配置
傳遞給NavigatorIOS的道具將設置導航欄的默認配置。作為屬性傳遞給路徑對象的道具將設置該路徑導航欄的配置，覆蓋傳遞給NavigatorIOS組件的任何道具。

_handleNavigationRequest() {
  this.refs.nav.push({
    //...
    passProps: { myProp: 'genius' },
    barTintColor: '#996699',
  });
}

render() {
  return (
    <NavigatorIOS
      //...
      style={{flex: 1}}
      barTintColor='#ffffcc'
    />
  );
}
在上面的示例中，當推送新路線時，導航欄顏色會更改。

Props

Methods

參考

Props

initialRoute

NavigatorIOS使用路由對象來標識子視圖，其道具和導航欄配置。諸如推送操作之類的導航操作期望路線看起來像initialRoute。
TYPEREQUIRED
object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,leftButtonSystemIcon: Object.keys(SystemIcons),onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,rightButtonSystemIcon: Object.keys(SystemIcons),onRightButtonPress: function,wrapperStyle: View.style,navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,barStyle: enum('default', 'black'),titleTextColor: string,translucent: bool}Yes

barStyle

導航欄的樣式。支持的值為“default”，“black”。使用“黑色”而不是將barTintColor設置為黑色。這會生成一個導航欄，其原生iOS風格具有更高的半透明度。
TYPEREQUIRED
enum('default', 'black')No

barTintColor

導航欄的默認背景顏色。
TYPEREQUIRED
stringNo

interactivePopGestureEnabled

布爾值，指示是否啟用交互式彈出手勢。這對於啟用/禁用後滑動導航手勢非常有用。

 如果未提供此prop，則默認行為是在顯示導航欄時啟用後滑動手勢，並在隱藏導航欄時禁用。一旦提供了interactivePopGestureEnabled prop，就永遠無法恢復默認行為。
TYPEREQUIRED
boolNo

itemWrapperStyle

導航器中組件的默認包裝樣式。一個常見的用例是為每個場景設置backgroundColor。
TYPEREQUIRED
View.styleNo

navigationBarHidden

布爾值，指示默認情況下是否隱藏導航欄。
TYPEREQUIRED
boolNo

shadowHidden

布爾值，指示是否默認隱藏1px細線陰影。
TYPEREQUIRED
boolNo

tintColor

用於導航欄中按鈕的默認顏色。
TYPEREQUIRED
stringNo

titleTextColor

導航欄標題的默認文本顏色。
TYPEREQUIRED
stringNo

translucent

布爾值，指示默認情況下導航欄是否為半透明
TYPEREQUIRED
boolNo

Methods

push()

push((route: object));
導航到新路線。
參數:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYesThe new route to navigate to.

popN()

popN((n: number));
立刻回到N個場景。當N = 1時，行為與pop（）匹配。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
nnumberYesThe number of scenes to pop.

pop()

pop();
彈回到上一個場景。

replaceAtIndex()

replaceAtIndex((route: object), (index: number));
替換導航堆棧中的路由。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYes將替換指定路由的新路由。
indexnumberYes應該替換的堆棧路由。如果它是負數，則從堆棧的後面開始計算。

replace()

replace((route: object));
替換當前場景的路徑，並立即加載新路徑的視圖。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYesThe new route to navigate to.

replacePrevious()

replacePrevious((route: object));
替換上一個場景的路徑/視圖
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYes要替換上一個場景的新路徑。

popToTop()

popToTop();
返回導航堆棧中最頂層的項目。

popToRoute()

popToRoute((route: object));
返回特定路徑對象的項目。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYesThe new route to navigate to.

replacePreviousAndPop()

replacePreviousAndPop((route: object));
替換先前的路徑/視圖並轉換回它。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYes替換上一個場景的新路由。

resetTo()

resetTo((route: object));
替換頂部項目並彈出它。
Parameters:
NAMETYPEREQUIREDDESCRIPTION
routeobjectYes將替換最頂層項的新路由。






Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , , ,

You May Also Like

0 意見