官宣:ReactNative导航库重大更新

365 阅读3分钟

2020年2月6日React Navigation通过其博客正式宣布了React Navigation第5个版本,即React Navigation 5.0,其称之为一种新的导航方式。官网博客地址:React Navigation 5.0 - A new way to navigate 今天通过本篇文章来一起看一下和之前版本有何不同。

基于配置的组件

在之前的版本中,我们创建一些导航路由,比如创建堆栈导航,底部Tab导航,都是采用的静态的配置navigationOptions选项来完成的。但是在React Navigation 5.0中是做了基于组件的动态配置的鑫的方式,和以前的版本完全不一样。 比如之前版本中创建一个堆栈导航的方式如下:

const Auth = createStackNavigator(
  {
    Login: LoginScreen,
    Binding: BindScreen,
    SelectFocusFiledScreen,
    ProtocolAuth,
  },
  {
    headerMode: 'none',
    // transitionConfig: () => ({
    //   transitionSpec: {
    //     duration: 200,
    //     timing: Animated.timing,
    //   },
    // }),
  }
)

在 createStackNavigator的函数中第一个参数是配置我的路由页面,第二个参数是一些静态设置。 但是在React Navigation 5.0中的创建堆栈导航的方式却不一样,代码如下:

const HomeStack = createStackNavigator();
// 首页的路由栈
const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} options={{
        title: '首页'
      }} />
      <HomeStack.Screen name="Detail" component={DetailScreen} />
    </HomeStack.Navigator>
  )
}

首先不一样的地方在于createStackNavigator这里是一个空参数的函数,如果你按照以前版本的方式传入参数的话,会有如下报错,提示你是不是在使用以前版本的API

在这里插入图片描述

加入Hooks

目前可用的hooks:

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

通过组件更新设置

navigation增加了一个setOptions属性,以此来配置页面的导航配置,示例代码如下:

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

全新的主题(Theme)API

新版本重构了主题系统,方便用户自定义设置。新版本提供了一个theme对象来配置比如背景色等等。总体来说新版本对于配置导航器的主题更加简单明了。给出的示例代码如下;

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)',
  },
};

使用TypeScript重新构建React Navigation 5.0

TypeScript是当前js领域比较火的语言,比js更加严谨,也更加简洁,有心的读者朋友可以学习一下。

构建原生导航器

新版中使用了react-native-screens库,构建了Android和ios系统原生的导航器组件,使用视觉效果和原生一样

其他的改进

  • 优化了drawer navigator
  • 使用reset option 直接传递新的state
  • 优化了页面焦点状态变化时,focus 和 blur事件的捕捉
  • 集成了InteractionManager 来确保动画完成之后,页面才开始新的任务,比如网络请求等。
  • 添加react-native-safe-area-context来更高适配当前的全面屏手机的安全区域。

旧版本升级

通过这次官方的说明,可以看到React Navigation 5.0的变化还是挺大的,所以官方还是非常贴心的给出了一个升级文档,upgrade guide 通过这个此文档相信大家一定可以非常顺利升级成功的。

最后

好了,通过以上的说明总结,大家应该大体了解了ReactNative官方推荐的React Navigation最新版本的一些变化和特性,下一篇文章将通过一个具体的Demo来说明React Navigation 5.0具体使用,敬请期待。 欢迎大家关注我的公众号:君伟说。分享开发技术,职场故事和生活感悟,2020我们一起同行。

在这里插入图片描述