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
},
用到的基本就这些了，不过你以为就完了吗，太天真了。
- 我遇到了意想不到的safeAreaView重复添加，导致react-native跳转原生，原生返回的时候，导致header的安全区域double，（仅iOS，Android原生无），无论尝试修改headerHeight，或者移动header，都无法完美解决，使用检查工具发现是安全区域重复添加，因为4.x版本新增了safeArea导致，经过多次尝试，修改了原生的safeArea
- react-native进入原生页，原生再进入react-native页面，发现Andorid的沉浸式失效了，这里要手动添加沉浸式,在原生返回的router组件里
<>
<StatusBar
backgroundColor={'transparent'}
barStyle={'dark-content'}
translucent={true} />
<RouterContainer/>
</>
safeArea.png
至此React-Navigation的升级完成了。
