官宣：ReactNative導航庫重大更新

2020年2月6日React Navigation通過其博客正式宣佈了React Navigation第5個版本，即React Navigation 5.0，其稱之為一種新的導航方式。官網博客地址：[React Navigation 5.0 - A new way to navigate](React Navigation 5.0 - A new way to navigate · React Navigation)

今天通過本篇文章來一起看一下和之前版本有何不同。

基於配置的組件

在之前的版本中，我們創建一些導航路由，比如創建堆棧導航，底部Tab導航，都是採用的靜態的配置navigationOptions選項來完成的。但是在React Navigation 5.0中是做了基於組件的動態配置的鑫的方式，和以前的版本完全不一樣。

比如之前版本中創建一個堆棧導航的方式如下：

<code>
const
 Auth = createStackNavigator(
  {
    Login: LoginScreen,
    Binding: BindScreen,
    SelectFocusFiledScreen,
    ProtocolAuth,
  },
  {
    headerMode: 
'none'
,
     
     
     
     
     
     
  }
)/<code>

在 createStackNavigator的函數中第一個參數是配置我的路由頁面，第二個參數是一些靜態設置。

但是在React Navigation 5.0中的創建堆棧導航的方式卻不一樣，代碼如下：

<code>const HomeStack = createStackNavigator();
// 首頁的路由棧
const HomeStackScreen = () => {
  return (
    
<
HomeStack.Navigator
>

      
<
HomeStack.Screen
 
name
= 
"Home"
 
component
=
{HomeScreen}
 
options
=
{{
        
title:
 '首頁'
      }} />

      
<
HomeStack.Screen
 
name
=
"Detail"
 
component
=
{DetailScreen}
 />

    
HomeStack.Navigator
>

  )
}/<code>

首先不一樣的地方在於createStackNavigator這裡是一個空參數的函數，如果你按照以前版本的方式傳入參數的話，會有如下報錯，提示你是不是在使用以前版本的API

加入Hooks

目前可用的hooks:

• useNavigation
• useRoute
• useNavigationState
• useFocusEffect
• useIsFocused
• useLinking
• useScrollToTop

通過組件更新設置

navigation增加了一個setOptions屬性，以此來配置頁面的導航配置，示例代碼如下：

<code>navigation.setOptions({
  headerRight: 
()
 =>
 (
     {
        
await
 saveNote();
        navigation.replace(
'Notes'
);
      }}
    />
  ),
})/<code>

全新的主題(Theme)API

新版本重構了主題系統，方便用戶自定義設置。新版本提供了一個theme對象來配置比如背景色等等。總體來說新版本對於配置導航器的主題更加簡單明瞭。給出的示例代碼如下；

<code>
const
 
MyTheme
 
=
 
{
  
dark:
 
false
,
  
colors:
 
{
    
primary:
 
'rgb(255, 45, 85)'
,
    
background:
 
'rgb(242, 242, 242)'
,
    
card:
 
'rgb(255, 255, 255)'
,
    
text:
 
'rgb(28, 28, 30)'
,
    
border:
 
'rgb(199, 199, 204)'
,
   
},
};
/<code>

使用TypeScript重新構建React Navigation 5.0

TypeScript是當前js領域比較火的語言，比js更加嚴謹，也更加簡潔，有心的讀者朋友可以學習一下。

構建原生導航器

新版中使用了[react-native-screens](kmagiera/react-native-screens)庫，構建了Android和ios系統原生的導航器組件，使用視覺效果和原生一樣

其他的改進

• 優化了drawer navigator
• 使用reset option 直接傳遞新的state
• 優化了頁面焦點狀態變化時，focus 和 blur事件的捕捉
• 集成了InteractionManager 來確保動畫完成之後，頁面才開始新的任務，比如網絡請求等。
• 添加react-native-safe-area-context來更高適配當前的全面屏手機的安全區域。

舊版本升級

通過這次官方的說明，可以看到React Navigation 5.0的變化還是挺大的，所以官方還是非常貼心的給出了一個升級文檔，[upgrade guide](Upgrading from 4.x · React Navigation) 通過這個此文檔相信大家一定可以非常順利升級成功的。

最後

好了，通過以上的說明總結，大家應該大體瞭解了ReactNative官方推薦的React Navigation最新版本的一些變化和特性，下一篇文章將通過一個具體的Demo來說明React Navigation 5.0具體使用，敬請期待。

歡迎大家關注我的公眾號：君偉說。分享開發技術，職場故事和生活感悟，2020我們一起同行。