React-Navigation 5.X 學習記錄（一）------ StackNavigator 篇

安裝

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的配置選項
1. initialRouteName
  
  首次加載名稱
2. screenOptions
  
  螢幕的預設選項。如下示例。
```
<Stack.Navigator
initialRouteName="Page1"     //作為初始化頁面、不寫的話預設第一個screen為初始化頁面
screenOptions={{                 //用來定制頭部資訊、根據自己需要更改
  title: '測試标題',
  headerStyle: {
    backgroundColor: '#ee7530'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize: 20
  }
}}>
           
```
3. keyboardHandlingEnabled
  
  如果為false，則導航到新螢幕時，螢幕鍵盤不會自動關閉。預設為true
4. mode
  
  定義渲染和過渡的樣式
  
  card：使用标準的iOS和Android螢幕過渡。這是預設值.
  
  modal：這有兩件事：設定headerMode到screen堆棧，除非指定使螢幕從iOS底部的底部滑入，這是一種常見的iOS模式.
5. headerMode
  
  指定标題的呈現方式
  
  float：渲染停留在頂部的單個标題，并在更改螢幕時進行動畫處理。iOS上的常見模式。
  
  screen：每個螢幕都有一個附加的标題，标題随螢幕一起淡入和淡出。Android上的常見模式。
  
  none ：沒有标題。
Stack.Screen的配置選項
- options
  
  可用于配置導航器内的各個螢幕
  1. 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!' })}
	/>
           
```
  2. 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}
		    />
		  );
		};
           
```
  3. headerShown
    
    是顯示還是隐藏螢幕标題。預設情況下顯示标題，除非将headerMode其設定為none。設定為 false隐藏标題。在特定螢幕上隐藏标題時，您可能還需要将headerModeprop 設定為screen。
  4. 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>
  );
}
           
```
  5. headerTitleAlign
    
    對齊标題。可選擇left或center。預設為iOS-center和Android-left
  6. headerTitleAllowFontScaling
    
    标頭标題字型是否應縮放以符合“文本大小”輔助功能設定。預設為false。
  7. headerBackAllowFontScaling
    
    後退按鈕标題字型是否應縮放以符合“文本大小”輔助功能設定。預設為false。
  8. headerBackImage
    
    該函數傳回一個React Element以在标題的後退按鈕中顯示自定義圖像。使用函數時，它将tintColor在其參數對象中接收。預設為帶有背面圖像源的Image元件，它是平台的預設背面圖示圖像（iOS上為人字形，Android上為箭頭）。
  9. headerBackTitle
    
    iOS上的後退按鈕使用的标題字元串。預設為上一個場景的headerTitle。
  10. headerBackTitleVisible
    
    為後退按鈕标題是否可見提供了一個合理的預設值，但是如果您想覆寫它，則可以使用true或false在此選項中使用
  11. headerTruncatedBackTitle
    
    當headerBackTitle螢幕上不适合顯示後退按鈕時使用的标題字元串。"Back"預設情況下。
  12. 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>
  );
}
           
```
  13. headerLeft
    
    傳回React元素以顯示在标題左側的函數。使用函數時onPress，在呈現時它會接收許多參數（label，labelStyle和more-檢查types.tsx以擷取完整清單）。
  14. headerStyle
    
    标頭的樣式對象。例如，您可以在此處指定自定義背景色。
  15. headerTitleStyle
    
    标題元件的樣式對象
  16. headerBackTitleStyle
    
    标題的樣式對象
  17. headerLeftContainerStyle
    
    自定義headerLeft元件容器的樣式，例如添加填充。
  18. headerRightContainerStyle
    
    自定義headerRight元件容器的樣式，例如添加填充。
  19. headerTitleContainerStyle
    
    自定義headerTitle元件容器的樣式，例如添加填充。預設情況下，headerTitleContainerStyle是具有絕對位置的風格和偏移量都left和right。這可能導緻的空白或之間重疊headerLeft和headerTitle如果定制headerLeft被使用。可以通過在中和中進行調整left和right樣式來解決。headerTitleContainerStylemarginHorizontalheaderTitleStyle
  20. headerTintColor
    
    标頭的色調顔色
  21. headerPressColorAndroid
    
    材料波紋的顔色（僅适用于Android> = 5.0）
  22. headerTransparent
    
    預設為false。如果為true，則标題将沒有背景，除非您明确為其提供背景headerBackground。标頭也将浮動在螢幕上，使其與下面的内容重疊。
  23. 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} />
    ),
  }}
/>;
           
```
  24. headerStatusBarHeight
    
    在标題頂部添加額外的填充以說明半透明的狀态欄。預設情況下，它使用裝置安全區域插圖中的最大值。傳遞0或自定義值以禁用預設行為，并自定義高度。
  25. cardShadowEnabled
    
    使用此道具在過渡期間具有可見的陰影。預設為true。
  26. cardOverlayEnabled
    
    使用此道具可以在過渡期間在卡下看到半透明的深色覆寫層。預設為trueAndroid和falseiOS。
  27. cardStyle
    
    堆棧中卡的樣式對象。您可以在此處提供自定義背景色，以代替預設背景。您還可以指定{ backgroundColor: ‘transparent’ }使前一個螢幕在下面可見（對于透明模式）。這對于實作模态對話框之類的東西很有用。mode: 'modal’使用透明背景時，還應該在堆棧視圖配置中指定，這樣以前的螢幕就不會分離并且在下面保持可見。
  28. animationEnabled
    
    螢幕上是否應啟用過渡動畫。如果将其設定為false，則按下或彈出時螢幕不會動畫。預設為true。
  29. animationTypeForReplace
    
    當此螢幕替換另一個螢幕時要使用的動畫類型。它采用以下值：
    
    push -将使用推送新螢幕的動畫
    
    pop -将使用彈出螢幕的動畫
    
    預設為push。
    
    當pop被使用時，pop動畫被施加到被替換的畫面。
  30. gestureEnabled
    
    是否可以使用手勢關閉此螢幕。預設為trueiOS，falseAndroid。
  31. gestureResponseDistance
    
    從螢幕邊緣開始覆寫觸摸距離的對象，以識别手勢。該對象可以包含以下屬性：
    
    horizontal- 數字 -水準方向的距離。預設為25。
    
    vertical- 數字 -垂直方向的距離。預設值為135。
  32. gestureVelocityImpact
    
    決定手勢速度相關性的數字。預設值為0.3。
  33. gestureDirection
    
    手勢的方向。與動畫有關
  34. transitionSpec
    
    螢幕過渡的配置對象。與動畫有關.請點選此處檢視
  35. cardStyleInterpolator
    
    插卡各部分的插補樣式。與動畫有關請點選此處檢視
  36. headerStyleInterpolator
    
    标頭各部分的内插樣式。與動畫有關請點選此處檢視
  37. safeAreaInsets
    
    螢幕的安全區域插圖。這用于避免使用諸如缺口和狀态欄之類的元素。預設情況下，将自動檢測裝置的安全區域插圖。您可以使用此選項覆寫行為。接受包含以下可選屬性的對象：
    
    top- 數字 -頂部插圖的值，例如包含狀态欄和槽口的區域。
    
    right- 數字 -左插圖的值。
    
    bottom- 數字 -頂部插圖的值，例如底部的區域導航欄。
    
    left。- 數字 -右插圖的值。
動畫部分請點選此處檢視

React-Navigation 5.X 學習記錄（一）------ StackNavigator 篇

安裝

StackNavigator 使用

頁面跳轉與傳值

配置選項

繼續閱讀

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

React中less的引用初窺

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題