React-Navigation 升級3.x - 4.x

升級react-navigation等組件

npm install react-navigation react-navigation-stack@^1.7.3 react-navigation-tabs@^1.2.0 react-navigation-drawer@^1.4.0

• iOS，一定要去pod install, 只有install之后才能完成linking

  
  
  pod.png

React Navitve 版本>= 0.60 會自動linking，如果低于0.60，需要手動去linking，例如

react-native link react-native-reanimated
react-native link react-native-gesture-handler

• Android 修改MainActivity.java, react-native-gesture-handle導(dǎo)入即可

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

以上是更新組件庫完成，基本沒問題了，其次是修改代碼中的調(diào)用，主要講更新后的不同點。

新增headerTitleAlign

headerTitleAlign
 
 * left (Andorid title默認(rèn)居左)
 * center （iOS title默認(rèn)居中）

可以設(shè)置統(tǒng)一居左，或者居中

會默認(rèn)有返回箭頭+title

可以設(shè)置：headerBackTitleVisible = false
或：headerBackTitle ()=> </> 不推薦

返回headerBackImage:<

headerBackImage: () => <BackImage/>

要使用箭頭函數(shù),返回title一樣

Andorid的push動畫變成present，要修改push方式

CardStyleInterpolators
forHorizontalIOS - Standard iOS-style slide in from the right.
forVerticalIOS - Standard iOS-style slide in from the bottom (used for modals).
forModalPresentationIOS - Standard iOS-style modal animation in iOS 13.
forFadeFromBottomAndroid - Standard Android-style fade in from the bottom for Android Oreo.
forRevealFromBottomAndroid - Standard Android-style reveal from the bottom for Android Pie.

這里選擇和iOS一致：cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS

Andorid的沉浸式狀態(tài)欄

 <StatusBar backgroundColor="transparent" translucent />
 <AppContainer />
  
 4.x 修復(fù)了沉浸式的問題，不需要每個界面添加沉浸式代碼，那個真酸爽。

有時不需要header，也不是直接null，雖然還能使用，會弱提示，修改

navigationOptions: {
                headerShown: false,
   }

headerMode的方式(頁面公用一個header，切換時的動畫),沒修改，iOS默認(rèn)float方式，Andorid默認(rèn)screen

headerMode - Specifies how the header should be rendered:
float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
none - No header will be rendered.

可以通過TabbarIcon設(shè)置圖標(biāo),tabBarOnPress獲取點擊事件

tabBarIcon: ({ focused, tintColor }) => {
      switch(routeName) {
          case "Main":
          return <Image 
          source={focused ? this.state.robot.srcChecked : this.state.main.src}
          style={{width: 25, height: 25}} />
                        }
              },
              
tabBarOnPress: ({ navigation, defaultHandler }) => {
        defaultHandler();
        const { routeName } = navigation.state;
        switch (routeName) {
            case "Main":
                console.log('main')
                break;
                }
                
           }

完整設(shè)置如下：

defaultNavigationOptions: {
  headerStyle: {
    elevation: 0,         // 移除 Android Header 陰影
    shadowOpacity: 0,     // 移除 iOS Header 陰影
  },
  headerBackImage: () => <Image />,        // 統(tǒng)一返回箭頭
  headerTitleAlign: 'center',              // Android 標(biāo)題居中
  headerBackTitleVisible: false,           // 隱藏 iOS 返回按鈕標(biāo)題
  headerPressColorAndroid: 'transparent',  // 移除 Android 點擊返回按鈕效果
  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,   // 切換路由時水平動畫
  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit, // 切換路時 Header 動畫
  headerShown: false,                      // 隱藏header
},

用到的基本就這些了，不過你以為就完了嗎，太天真了。

1. 我遇到了意想不到的safeAreaView重復(fù)添加，導(dǎo)致react-native跳轉(zhuǎn)原生，原生返回的時候，導(dǎo)致header的安全區(qū)域double，（僅iOS，Android原生無），無論嘗試修改headerHeight，或者移動header，都無法完美解決，使用檢查工具發(fā)現(xiàn)是安全區(qū)域重復(fù)添加，因為4.x版本新增了safeArea導(dǎo)致，經(jīng)過多次嘗試，修改了原生的safeArea
2. react-native進入原生頁，原生再進入react-native頁面，發(fā)現(xiàn)Andorid的沉浸式失效了，這里要手動添加沉浸式,在原生返回的router組件里

 <>
     <StatusBar
        backgroundColor={'transparent'}
        barStyle={'dark-content'}
        translucent={true} />
     <RouterContainer/>
</>

safeArea.png

至此React-Navigation的升級完成了。