共计 5275 个字符，预计需要花费 14 分钟才能阅读完成。
年初做了 React Native 的 Android 小应用，里面使用到了 React Navigation 4.x，完成后 2、3 个月 React Navigation 发布了 5.x，又过了小半年才来尝鲜。
首先接触到最大的改变是路由配置不再是函数创建的，而是组件化，有点像 React Route 3.x 到 4.x 的改变。
// 4.x 创建路由
const defaultConfig = (s: any) => {
return {
screen: s,
navigationOptions: {headerShown: false,},
};
};
export default createStackNavigator(
{[BOTTOM_TAB_KEY]: {
screen: TabContainer,
navigationOptions: {headerShown: false,},
},
[RouteKeyMap.myApp]: defaultConfig(PageMyApp),
}
)
// 5.x 创建路由
const NestingNavigators: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" headerMode="none">
<Stack.Screen name="Home" component={TabsView} />
<Stack.Screen name="List" component={ListView} />
<Stack.Screen name="Details" component={DetailsView} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default NestingNavigators;
新版本在做沉浸式布局更容易了。
在 4.x 的时候，组件内通过 StatusBar 可以修改状态栏的背景颜色、文字颜色等，但是在路由嵌套 / 层级多了，多个状态栏的样式就会有问题。
例如：a(红色) -> b(蓝色) -> c(灰色)，从 a 到 c 一层一层进入，状态栏显示正常，但是一层一层返回，状态栏只会显示最新 (c 灰色) 的那个。在 BottomTab 的页面直接切换，也是同样的状况。
在原文档中也给出了对应的方案，通过手动监听组件 didFocus 事件，手动设置 / 重置状态栏。当时我们写了一个高阶组件处理这个问题，ILayout.widthStatusBar({full: true, backgroundColor: 'transparent'})(Home)。
import {View, StatusBar, StatusBarStyle} from 'react-native';
interface WidthStatusBarParam {
/** 状态栏的背景色 */
backgroundColor?: string;
/** 设置状态栏文本的颜色。*/
barStyle?: StatusBarStyle;
/** 是否隐藏状态栏。*/
hidden?: boolean;
/** 全屏 */
full?: boolean;
/** 背景颜色 */
pageBackgroundColor?: string;
}
/**
* 设置状态栏
* @param barStyle 设置状态栏文本的颜色。* @param backgroundColor 状态栏的背景色
* @param hidden 是否隐藏状态栏。*/
export const setBarStyle = (barStyle: StatusBarStyle, backgroundColor: string, hidden: boolean) => {StatusBar.setBarStyle(barStyle as StatusBarStyle);
StatusBar.setHidden(hidden);
if (Helpers.iOS) {StatusBar.setNetworkActivityIndicatorVisible(true);
} else {StatusBar.setTranslucent(true);
StatusBar.setBackgroundColor(backgroundColor);
}
};
/**
* 设置当前页面的状态栏
* @param {Object} statusbarProps 参数
* @param {string} statusbarProps.backgroundColor 状态栏背景色
*
* @example widthStatusBar({})(YourNode);
*/
const widthStatusBar = ({
backgroundColor = Configs.Colors.primary,
barStyle = 'light-content',
hidden = false,
full = false,
pageBackgroundColor = Configs.Colors.pageBackgroundColor,
}: WidthStatusBarParam) => <T, P, C>(WrappedComponent: React.ComponentType<T>) => {
type Props = T & NavigationStackScreenProps;
return class WidthStatusBar extends React.PureComponent<Props, P, C> {
_navListener!: NavigationEventSubscription;
constructor(props: Props) {super(props);
this._navListener = props.navigation.addListener('willFocus', () => {setBarStyle(barStyle, 'transparent', hidden);
});
}
componentWillUnmount() {this._navListener.remove();
}
render() {
// TODO 优化 iOS SafeAreaView
return (<View style={{ flex: 1, backgroundColor: pageBackgroundColor}}>
<View
style={{height: full ? 0 : StatusBar.currentHeight, backgroundColor: backgroundColor}}
/>
<WrappedComponent {...this.props} />
</View>
);
}
};
};
export default widthStatusBar;
现在嵌套中已经能显示正常了，但是 BottomTab 还是有点小问题，不过现在已经不需要这样麻烦了。
import React from 'react';
import {StatusBar, StatusBarProps} from 'react-native';
import {useIsFocused} from '@react-navigation/native';
const FocusAwareStatusBar: React.FC<StatusBarProps> = (props) => {const isFocused = useIsFocused();
return isFocused ? <StatusBar {...props} /> : null;
};
export default FocusAwareStatusBar;
使用这个组件轻松搞定。
文档：Different status bar configuration based on route
不过，目前最让我感到有趣的是对 TypeScript 的支持越来越好了。
以前在路由组件中需要从 route 拿值需要针对单个组件进行 NavigationStackScreenProps 配置，但是在 navigation.push 的时候并不知道具体有哪些参数。
现在通过配置一个根组件状态，就能实现在 navigation.push 提示可以跳转到哪个路由，并且必填的参数也会提醒。
import React from 'react';
import {NavigationContainer, CompositeNavigationProp} from '@react-navigation/native';
import {
createStackNavigator,
StackScreenProps,
StackNavigationProp,
} from '@react-navigation/stack';
import {BottomTabNavigationProp as BottomTabNavigationPropOriginal} from '@react-navigation/bottom-tabs';
import ListView from '@~/pages/list/list';
import DetailsView from '@~/pages/details/details';
import TabsView, {BottomTabParamList} from './bottom-tab';
/** 当前所有 Stack 路由的参数 */
type RootStackParamList = {
Home: undefined;
List: undefined;
Details: {id: number;};
};
/** Stack 路由的 props */
export type RootStackScreenProps<T extends keyof RootStackParamList> = StackScreenProps<
RootStackParamList,
T
>;
/** BottomTab 路由的 navigation prop */
export type BottomTabNavigationProp<T extends keyof BottomTabParamList> = CompositeNavigationProp<
BottomTabNavigationPropOriginal<BottomTabParamList, T>,
StackNavigationProp<RootStackParamList>
>;
/** BottomTab 路由的 props */
export type BottomTabScreenProps<T extends keyof BottomTabParamList> = {navigation: BottomTabNavigationProp<T>;};
const Stack = createStackNavigator<RootStackParamList>();
const NestingNavigators: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" headerMode="none">
<Stack.Screen name="Home" component={TabsView} />
<Stack.Screen name="List" component={ListView} />
<Stack.Screen name="Details" component={DetailsView} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default NestingNavigators;
import React from 'react';
import {View, Text} from 'react-native';
import FocusAwareStatusBar from '@~/components/focus-aware-status-bar/focus-aware-status-bar';
import * as Routes from '@~/routes';
type UserCenterProps = {} & Routes.BottomTabScreenProps<'UserCenter'>;
const UserCenter: React.FC<UserCenterProps> = ({navigation}) => {
return (
<View>
<FocusAwareStatusBar backgroundColor="#f99" />
<View>
<Text>UserCenter</Text>
</View>
<View>
<Text
onPress={() => {
navigation.push('Details', {id: 3333,});
}}
>
Go Details
</Text>
</View>
</View>
);
};
export default UserCenter;
文档：Type checking with TypeScript
到目前为止，体验已经比以前好太多了，单单路由跳转的代码提示就已经提升很多幸福感了。
正文完