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

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导入即可

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);
+      }
+    };
+  }
}

以上是更新组件库完成，基本没问题了，其次是修改代码中的调用，主要讲更新后的不同点。

新增headerTitleAlign

headerTitleAlign
 
 * left (Andorid title默认居左)
 * center （iOS title默认居中）

可以设置统一居左，或者居中

会默认有返回箭头+title

可以设置：headerBackTitleVisible = false
或：headerBackTitle ()=> </> 不推荐

返回headerBackImage:<

headerBackImage: () => <BackImage/>

要使用箭头函数,返回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的沉浸式状态栏

 <StatusBar backgroundColor="transparent" translucent />
 <AppContainer />
  
 4.x 修复了沉浸式的问题，不需要每个界面添加沉浸式代码，那个真酸爽。

有时不需要header，也不是直接null，虽然还能使用，会弱提示，修改

navigationOptions: {
                headerShown: false,
   }

headerMode的方式(页面公用一个header，切换时的动画),没修改，iOS默认float方式，Andorid默认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设置图标,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;
                }
                
           }

完整设置如下：

defaultNavigationOptions: {
  headerStyle: {
    elevation: 0,         // 移除 Android Header 阴影
    shadowOpacity: 0,     // 移除 iOS Header 阴影
  },
  headerBackImage: () => <Image />,        // 统一返回箭头
  headerTitleAlign: 'center',              // Android 标题居中
  headerBackTitleVisible: false,           // 隐藏 iOS 返回按钮标题
  headerPressColorAndroid: 'transparent',  // 移除 Android 点击返回按钮效果
  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,   // 切换路由时水平动画
  headerStyleInterpolator: HeaderStyleInterpolators.forUIKit, // 切换路时 Header 动画
  headerShown: false,                      // 隐藏header
},

用到的基本就这些了，不过你以为就完了吗，太天真了。

1. 我遇到了意想不到的safeAreaView重复添加，导致react-native跳转原生，原生返回的时候，导致header的安全区域double，（仅iOS，Android原生无），无论尝试修改headerHeight，或者移动header，都无法完美解决，使用检查工具发现是安全区域重复添加，因为4.x版本新增了safeArea导致，经过多次尝试，修改了原生的safeArea
2. react-native进入原生页，原生再进入react-native页面，发现Andorid的沉浸式失效了，这里要手动添加沉浸式,在原生返回的router组件里

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

safeArea.png

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