React Navigation(四)-createStackNavigator(API)
提供了screen之間相互跳轉的方式,每一個新的screen將置於棧頂。
預設情況下,棧導航器的配置是蘋果和安卓熟悉的look和feel:ios中新的screen從有的劃入,安卓中是從底部淡入。在ios中,也可以設定成從底部劃入的modal形式。
API 定義
createStackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs
第一個引數:路由配置物件是路由名稱與路由配置的對映,告訴導航器路由裡有哪些東西。
createStackNavigator({ // 對於每一個能跳轉到的screen,建立這樣的實體: Profile: { // `ProfileScreen` 是react元件,是screen的主要內容,(就是之前文章裡提過的在screen裡註冊過的元件). screen: ProfileScreen, // 當`ProfileScreen` 被StackNavigator載入, 那麼他就有了`navigation`屬性,(系列文章第一篇第一句就是這個). // Optional: When deep linking or using react-navigation in a web app, this path is used: path: 'people/:name', // The action and route params are extracted from the path. // Optional: Override the `navigationOptions` for the screen navigationOptions: ({ navigation }) => ({ title: `${navigation.state.params.name}'s Profile'`, }), }, ...MyOtherRoutes, });
StackNavigatorConfig
第二個引數:路由器選項
initialRouteName
- 設定預設screen. 必須是第一個引數中的key之一(比如 'Profile').initialRouteParams
- 初始路由的引數initialRouteKey
- 初始路由可選識別符navigationOptions
- screens的預設導航選項paths
- 會覆蓋第一個引數中設定的對映
視覺化選項:
mode
- 定義了渲染和過渡的風格:card
- 預設選項,使用ios和安卓標準風格.modal
- screen從底部劃入. 只在ios有效,安卓無影響.
headerMode
- 指明頭部的渲染方式:float
screen
- 每一個screen都attache一個header並且header隨著screen一起淡入淡出. 是Android的共通模式.none
- header不被渲染(如果不需要header導航欄,可以用這個選項).
headerTransitionPreset
- 當headerMode: float
時,指定header怎樣在screen之間過度.fade-in-place
- Header components cross-fade without moving, similar to the Twitter, Instagram, and Facebook app for iOS. This is the default value.uikit
- An approximation of the default behavior for iOS.
cardStyle
- Use this prop to override or extend the default style for an individual card in stack.transitionConfig
- Function to return an object that is merged with the default screen transitions (take a look at TransitionConfig in type definitions). Provided function will be passed the following arguments:transitionProps
- Transition props for the new screen.prevTransitionProps
- Transitions props for the old screen.isModal
- Boolean specifying if screen is modal.
onTransitionStart
- Function to be invoked when the card transition animation is about to start.onTransitionEnd
- Function to be invoked once the card transition animation completes.
(大多都是跳轉過度效果設定)
navigationOptions
(兩個引數裡頭都能設定該項,如果都進行了設定,以第二個引數會被覆蓋,因為第一個引數是每個screen的個性化設定,第二個引數裡頭是通用設定)
title
string型別,是headerTitle的備選項。另外如果巢狀在TabNavigator中,則是tabBarLabel的備選項,巢狀在DrawerNavigator中,是drawerLabel的備選項。(備選項的意思就是如果沒有設定該項,則使用title中的設定)
header
react元素或者返回值是react元素的函式,作為header顯示,設定為null隱藏header
headerTitle
字串,react元素或者react元件。預設顯示title中的設定。使用元件時,接收allowFontScaling,style和children三個屬性。字串標題將會傳入children中。
headerTitleAllowFontScaling
header的標題字型是否縮放以適應文字尺寸的設定。預設為真。
headerBackImage
react元素或者元件,在header返回按鈕處顯示自定義圖示。當使用元件時,接收tintColor,title等一些屬性。預設是圖片元件,在ios平臺是v型箭頭,在安卓平臺是<-箭頭
headerBackTitle
ios中被返回按鈕使用的字串,設定成null禁用。預設使用上一個頁面的headerTitle。該屬性必須在原始screen中定義,而不是目標screen中。例如要從A到B,想要在B中禁用:
StackNavigator({
A: {
screen: AScreen,
navigationOptions: () => ({
title: `A`,
headerBackTitle: null
}),
},
B: {
screen: BScreen,
navigationOptions: () => ({
title: `B`,
}),
}
});
headerTruncatedBackTitle
當headerBackTitle不適應螢幕時,該屬性字元會被返回按鈕使用。預設時"返回",定義方式與headerBackTitle一樣:
StackNavigator({
A: {
screen: AScreen,
navigationOptions: () => ({
title: `A`,
headerBackTitle: 'A much too long text for back button from B to A',
headerTruncatedBackTitle: `to A`
}),
},
B: {
screen: BScreen,
navigationOptions: () => ({
title: `B`,
}),
}
});
headerRight
展示在header右側的react元素
headerLeft
顯示在header左邊的react元素或者元件。當使用元件時,接收onPress,title,titleStyle等屬性-點選檢視完整的列表
headerStyle
header的style物件
headerForceInset
允許將forceInset物件傳遞到header內部的SafeAreaView中
headerTitleStyle
title元件的style物件
headerBackTitleStyle
返回title的style物件
headerTintColor
header的顏色
headerPressColorAndroid
material的波紋顏色(安卓版本大於5.0)
headerTransparent
預設時false。如果設定成true,header沒有背景色,除非你在headerStyle或者headerBackground中明確指定。
headerBackground
使用該屬性與headerTransparent,提供一個元件來渲染header的背景。
gesturesEnabled
是否能使用手勢關閉screen。ios預設true,安卓預設false。
gestureResponseDistance
是一個物件,覆寫從screen邊緣開始觸控到可識別的這段距離。有以下兩個屬性:
horizontal
- 數字- 水平距離,預設25.vertical
- 數字 - 垂直距離,預設135.
gestureDirection
字串,覆寫關閉手勢的方向。"default"時正常,“inverted”是從右向左
Navigator Props
StackNavigator(...)建立navigator元件需要下列屬性:
screenProps
- 向ziscreen傳遞額外選項, 例如:
const SomeStack = createStackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
Examples
const ModalNavigator =createStackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
navigationOptions: {
gesturesEnabled: false,
},
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const height = layout.initHeight;
const translateY = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [height, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateY }] };
},
}),
}
);
header的過度同時也能使用transitionConfig下的headerLeftInterpolator, headerTitleInterpolator 和headerRightInterpolator來配置