安裝
react-navigation 5 將各個導航部分獨立出來了,安裝需要一個一個安裝。
// 安裝react-navigation
yarn add @react-navigation/native
// 安裝依賴庫
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
// 安裝stack導航
yarn add @react-navigation/stack
StackNavigator 使用
StackNavigatiot:一次只渲染一個頁面,並提供頁面之間跳轉的方法。 當打開一個新的頁面時,它被放置在堆棧的頂部。
createStackNavigator是一個返回包含2個屬性的對象的函數:Screen和Navigator。它們都是用於配置導航器的React組件。Navigator和Screen作爲其子元素來定義路由的配置。
NavigationContainer是管理導航樹幷包含導航狀態的組件。該組件必須包裝所有導航器結構。通常,我們會在應用程序的根目錄下渲染此組件,通常是從導出的組件App.js。
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
// 可以在navigator 定義一些初始信息
<Stack.Navigator initialRouteName="Home">
// screen 接受兩個參數,name對應相應的component
<Stack.Screen name="Home" component={HomeScreen} />
// 可以爲Screen定義一些options選項,例如title爲呈現的標題
<Stack.Screen
name="Details"
component={DetailsScreen}
options={{ title: 'Overview' }} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
頁面跳轉與傳值
有以下跳轉方式:
1. navigation.navigate(name) 跳轉到特定的路由,如果隊列裏有此路由,不會再隊列裏添加
2. navigation.push(name) 跳轉到特定路由,不會判斷現有隊列裏是否存在此路由,直接添加
3. navigation.pop() 出棧
4. navigation.goBack() 返回
5. navigation.popToTop() 跳轉到隊列裏的第一個路由
6. navigation.setParams() 在調用SetParams時,路由器將產生一個新的狀態
7. navigation.replace() 用新的route替換當前的route
8. navigation.reset() 重置,將重置整個導航狀態並將其替換爲新的導航。
9. navigation.dispatch() 向路由發送 action
在跳轉時可以傳遞一些參數,供下個路由使用,下個屏幕以route.params的方式獲取參數。請參考以下示例,HomeScreen跳轉到DetailsScreen並傳遞了一些參數,DetailsScreen裏通過route獲取這些參數。在定義stack.screen時,也可以傳遞一些默認的參數,通過initialParams定義。
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. 跳轉並傳遞參數 */
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
function DetailsScreen({ route, navigation }) {
/* 2. 獲取參數 */
const { itemId } = route.params;
const { otherParam } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
/* 使用參數 */
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go to Details... again"
onPress={() =>
navigation.push('Details', {
itemId: Math.floor(Math.random() * 100),
})
}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
配置選項
通過上述代碼,你可以對stackNavigator有一個大致的瞭解。下面是Stack可用選項的信息。
- Stack.Navigator的配置選項
- initialRouteName
首次加載名稱 - screenOptions
屏幕的默認選項。如下示例。<Stack.Navigator initialRouteName="Page1" //作爲初始化頁面、不寫的話默認第一個screen爲初始化頁面 screenOptions={{ //用來定製頭部信息、根據自己需要更改 title: '測試標題', headerStyle: { backgroundColor: '#ee7530' }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', fontSize: 20 } }}>
- keyboardHandlingEnabled
如果爲false,則導航到新屏幕時,屏幕鍵盤不會自動關閉。默認爲true - mode
定義渲染和過渡的樣式
card:使用標準的iOS和Android屏幕過渡。這是默認值.
modal:這有兩件事:設置headerMode到screen堆棧,除非指定使屏幕從iOS底部的底部滑入,這是一種常見的iOS模式. - headerMode
指定標題的呈現方式
float:渲染停留在頂部的單個標題,並在更改屏幕時進行動畫處理。iOS上的常見模式。
screen:每個屏幕都有一個附加的標題,標題隨屏幕一起淡入和淡出。Android上的常見模式。
none :沒有標題。
- initialRouteName
- Stack.Screen的配置選項
- options
可用於配置導航器內的各個屏幕- title
頭部標題function StackScreen() { return ( // 靜態值 <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} /> // 動態獲取 <Stack.Screen name="Profile" component={HomeScreen} options={({ route }) => ({ title: route.params.name })} /> </Stack.Navigator> ); } /* 在組件中修改使用setOptions */ <Button title="Update the title" onPress={() => navigation.setOptions({ title: 'Updated!' })} />
- header
函數,返回一個React Element,顯示爲標題。如下示例。header: ({ scene, previous, navigation }) => { const { options } = scene.descriptor; const title = options.headerTitle !== undefined ? options.headerTitle : options.title !== undefined ? options.title : scene.route.name; return ( <MyHeader title={title} leftButton={ previous ? <MyBackButton onPress={navigation.goBack} /> : undefined } style={options.headerStyle} /> ); };
- headerShown
是顯示還是隱藏屏幕標題。默認情況下顯示標題,除非將headerMode其設置爲none。設置爲 false隱藏標題。在特定屏幕上隱藏標題時,您可能還需要將headerModeprop 設置爲screen。 - headerTitle
字符串或返回標頭要使用的React元素的函數。默認爲 title 選項值.function LogoTitle() { return ( <Image style={{ width: 50, height: 50 }} source={require('@expo/snack-static/react-native-logo.png')} /> ); } function StackScreen() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: props => <LogoTitle {...props} /> }} /> </Stack.Navigator> ); }
- headerTitleAlign
對齊標題。可選擇left或center。默認爲iOS-center和Android-left - headerTitleAllowFontScaling
標頭標題字體是否應縮放以符合“文本大小”輔助功能設置。默認爲false。 - headerBackAllowFontScaling
後退按鈕標題字體是否應縮放以符合“文本大小”輔助功能設置。默認爲false。 - headerBackImage
該函數返回一個React Element以在標題的後退按鈕中顯示自定義圖像。使用函數時,它將tintColor在其參數對象中接收。默認爲帶有背面圖像源的Image組件,它是平臺的默認背面圖標圖像(iOS上爲人字形,Android上爲箭頭)。 - headerBackTitle
iOS上的後退按鈕使用的標題字符串。默認爲上一個場景的headerTitle。 - headerBackTitleVisible
爲後退按鈕標題是否可見提供了一個合理的默認值,但是如果您想覆蓋它,則可以使用true或false在此選項中使用 - headerTruncatedBackTitle
當headerBackTitle屏幕上不適合顯示後退按鈕時使用的標題字符串。"Back"默認情況下。 - headerRight
該函數返回一個React元素以顯示在標題的右側。function StackScreen() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: props => <LogoTitle {...props} />, headerRight: () => ( <Button onPress={() => alert('This is a button!')} title="Info" color="#fff" /> ), }} /> </Stack.Navigator> ); }
- headerLeft
返回React元素以顯示在標題左側的函數。使用函數時onPress,在呈現時它會接收許多參數(label,labelStyle和more-檢查types.tsx以獲取完整列表)。 - headerStyle
標頭的樣式對象。例如,您可以在此處指定自定義背景色。 - headerTitleStyle
標題組件的樣式對象 - headerBackTitleStyle
標題的樣式對象 - headerLeftContainerStyle
自定義headerLeft組件容器的樣式,例如添加填充。 - headerRightContainerStyle
自定義headerRight組件容器的樣式,例如添加填充。 - headerTitleContainerStyle
自定義headerTitle組件容器的樣式,例如添加填充。默認情況下,headerTitleContainerStyle是具有絕對位置的風格和偏移量都left和right。這可能導致的空白或之間重疊headerLeft和headerTitle如果定製headerLeft被使用。可以通過在中和中進行調整left和right樣式來解決。headerTitleContainerStylemarginHorizontalheaderTitleStyle - headerTintColor
標頭的色調顏色 - headerPressColorAndroid
材料波紋的顏色(僅適用於Android> = 5.0) - headerTransparent
默認爲false。如果爲true,則標題將沒有背景,除非您明確爲其提供背景headerBackground。標頭也將浮動在屏幕上,使其與下面的內容重疊。 - headerBackground
返回React元素以呈現爲標題背景的函數。這對於使用背景(例如圖像或漸變)很有用。
例如,可以將其headerTransparent用於渲染模糊視圖以創建半透明標題。參考下述示例.import { BlurView } from 'expo-blur'; <Screen name="Home" component={HomeScreen} options={{ headerTransparent: true, headerBackground: () => ( <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} /> ), }} />;
- headerStatusBarHeight
在標題頂部添加額外的填充以說明半透明的狀態欄。默認情況下,它使用設備安全區域插圖中的最大值。傳遞0或自定義值以禁用默認行爲,並自定義高度。 - cardShadowEnabled
使用此道具在過渡期間具有可見的陰影。默認爲true。 - cardOverlayEnabled
使用此道具可以在過渡期間在卡下看到半透明的深色覆蓋層。默認爲trueAndroid和falseiOS。 - cardStyle
堆棧中卡的樣式對象。您可以在此處提供自定義背景色,以代替默認背景。您還可以指定{ backgroundColor: ‘transparent’ }使前一個屏幕在下面可見(對於透明模式)。這對於實現模態對話框之類的東西很有用。mode: 'modal’使用透明背景時,還應該在堆棧視圖配置中指定,這樣以前的屏幕就不會分離並且在下面保持可見。 - animationEnabled
屏幕上是否應啓用過渡動畫。如果將其設置爲false,則按下或彈出時屏幕不會動畫。默認爲true。 - animationTypeForReplace
當此屏幕替換另一個屏幕時要使用的動畫類型。它採用以下值:
push -將使用推送新屏幕的動畫
pop -將使用彈出屏幕的動畫
默認爲push。
當pop被使用時,pop動畫被施加到被替換的畫面。 - gestureEnabled
是否可以使用手勢關閉此屏幕。默認爲trueiOS,falseAndroid。 - gestureResponseDistance
從屏幕邊緣開始覆蓋觸摸距離的對象,以識別手勢。該對象可以包含以下屬性:
horizontal- 數字 -水平方向的距離。默認爲25。
vertical- 數字 -垂直方向的距離。默認值爲135。 - gestureVelocityImpact
決定手勢速度相關性的數字。默認值爲0.3。 - gestureDirection
手勢的方向。與動畫有關 - transitionSpec
屏幕過渡的配置對象。與動畫有關.請點擊此處查看 - cardStyleInterpolator
插卡各部分的插補樣式。與動畫有關請點擊此處查看 - headerStyleInterpolator
標頭各部分的內插樣式。與動畫有關請點擊此處查看 - safeAreaInsets
屏幕的安全區域插圖。這用於避免使用諸如缺口和狀態欄之類的元素。默認情況下,將自動檢測設備的安全區域插圖。您可以使用此選項覆蓋行爲。接受包含以下可選屬性的對象:
top- 數字 -頂部插圖的值,例如包含狀態欄和槽口的區域。
right- 數字 -左插圖的值。
bottom- 數字 -頂部插圖的值,例如底部的區域導航欄。
left。- 數字 -右插圖的值。
- title
- options
- 動畫部分 請點擊此處查看