一、 要實現如下功能

（1）stack、tab路由導航

（2）stack導航欄配置

（3）橫向過渡動畫

最終實現效果：動態圖

功能1：tab切換

功能2：stack切換

以上兩個功能實現都很簡單，我測試時，關注了一個問題，navigation 丟失。stackNavigator除了直接元件會自動擁有navigation屬性，其餘的都沒有，那麼解決的辦法就是使用withNavigation匯出要使用navigation的元件。該屬性具體的包在

import {withNavigation} from '@react-navigation/compat'

具體解釋：https://reactnavigation.org/docs/compatibility/

功能3：準確叫出每個部位的專業名字（不然每次搜尋都不知道叫啥，悲催）

我將https://reactnavigation.org/docs/stack-navigator對導航欄、後退按鈕、螢幕標題的處理總結在下面程式碼中

<Stack.Screen name="Chat" component={Chat} options={{
              //1.導航欄的設定
              headerMode: 'screen',
              headerShown: true, //導航欄是否顯示
              headerStyle:{      //
 
導航欄的樣式
                shadowOffset: {width: 0, height: 0},                    
                shadowColor: '#1a505050',
                shadowRadius: 2, //陰影模糊半徑
                shadowOpacity: 1, // 陰影不透明度             
                elevation: 1,      //讓安卓擁有灰色陰影 --- 必須   
              },

              //2. 
 
設定導航標題的“名字”和“位置”（同時給多個螢幕設定標題？）
              headerTitle: "聊天", 
              headerTitleAlign:'center',

              //3. 在headerLeft中可以完全覆蓋，後退按鈕，也可以使用headerBackImage
              headerLeft:()=><Image style={{width:9,height:16,marginHorizontal:25}} source={require('./img/return_icon.png')}/>
}} />

功能4：stack路由切換時，橫向過渡動畫

import {TransitionPresets} from '@react-navigation/stack';

<NavigationContainer>
        <Stack.Navigator
          screenOptions={{ 
               //這三個點是，解構賦值Es6的新寫法
            ...TransitionPresets.SlideFromRightIOS
          }}
        >
            <Stack.Screen name="Login" component={Login} options={{headerShown:false}}/>
            <Stack.Screen name="TabCollection" component={TabCollection} />
            <Stack.Screen name="Chat" component={Chat}/>
        </Stack.Navigator>
 </NavigationContainer>

具體看官網解釋：https://reactnavigation.org/docs/stack-navigator/#transitionpresets

這裡還有一些關於react-navigation 5.x我所遇到的問題

https://www.cnblogs.com/tengyuxin/p/13394646.html