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 使用

頁面跳轉與傳值

配置選項

Nginx R31 doc 官方文檔-01-nginx 如何安裝

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

react-native 使用 code-push 熱更新

React-Native 寫的 android 應用

CodePush 熱更新之自定義更新彈框及下載進度

Vue源碼分析（一）--- 響應式原理

CodePush熱更新常用命令

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結