1. react-native-screens

GitHub

1.1. 基础组件

1.1.1. Screen

1.1.2. ScreenContainer

实现导航功能，导航条及导航动画是由 react-navigation 实现。

可以包含一个或多个 Screen

iOS 是利用 - (void)addChildViewController:(UIViewController *)childController 实现 screen 切换。 Android 利用 Fragment

1.1.3. ScreenStack

实现导航功能，导航条及导航动画是原生实现。

可以包含一个或多个 Screen

1.1.4. ScreenStackHeaderConfig

ScreenStack 导航条的配置

<Screen>
  <ScreenStackHeaderConfig>
    <ScreenStackHeaderTitleView/>
    <ScreenStackHeaderCenterView/>
    <ScreenStackHeaderRightView/>
    <ScreenStackHeaderLeftView/>
  </ScreenStackHeaderConfig>
</Screen>

1.2. createNativeStackNavigator

import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';
// 替代 createStackNavigator()
createNativeStackNavigator();

1.3. 使用

import { useScreens } from 'react-native-screens';
useScreens();

useScreens() 作用： Screen 和 ScreenContainer 使用原生方式实现

1.4. Example

https://github.com/kmagiera/react-native-screens/blob/master/Example/App.js

const SCREENS = {
  Stack: { screen: Stack, title: 'Screen container based stack' },
  NativeStack: { screen: NativeStack, title: 'Native stack example' },
  Tabs: { screen: Tabs, title: 'Tabs example' },
  NativeNavigation: {
    screen: NativeNavigation,
    title: 'Native stack bindings for RNN',
  },
  Navigation: {
    screen: Navigation,
    title: 'React Navigation with screen enabled',
  },
  NavigationTabsAndStack: {
    screen: NavigationTabsAndStack,
    title: 'React Navigation Tabs + Stack',
  },
};

1.4.1. Stack

Stack 的导航由 ScreenContainer 实现

1.4.2. NativeStack

NativeStack 的导航由 ScreenStack 实现

1.4.3. Tab

RN + ScreenContainer 实现的 Tab

react-navigation 实现的导航

1.4.5. NativeNavigation

原生导航

react-native-screens