React Native Stack 替换为 Native Stack

[zhiqingchen]

相关平台

React Native

使用框架: React

复现步骤

无

期望结果

@yiheyang
期望把router-rn里面react navigation的Stack换成Native Stack
因为Stack返回手势不跟手，而且看起来卡卡的，和原生体验有差距
react-navigation/react-navigation#7184
react-navigation/react-navigation#8950

diff --git a/node_modules/@tarojs/router-rn/dist/router.js b/node_modules/@tarojs/router-rn/dist/router.js
index b4c1ea7..df12b36 100644
--- a/node_modules/@tarojs/router-rn/dist/router.js
+++ b/node_modules/@tarojs/router-rn/dist/router.js
@@ -8,6 +8,7 @@ import HeadTitle from './view/HeadTitle';
 import BackButton from './view/BackButton';
 import { getTabItemConfig, getTabVisible, setTabConfig, getTabInitRoute, handleUrl } from './utils/index';
 import React from 'react';
+import {createNativeStackNavigator, NativeStackNavigationOptions} from "@react-navigation/native-stack";
 export function createRouter(config) {
     var _a, _b;
     if ((_b = (_a = config === null || config === void 0 ? void 0 : config.tabBar) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.length) {
@@ -234,7 +235,7 @@ function getLinkingConfig(config) {
 }
 function createTabNavigate(config) {
     var _a;
-    const Stack = createStackNavigator();
+    const Stack = createNativeStackNavigator();
     const pageList = getPageList(config);
     const linking = getLinkingConfig(config);
     const stackProps = (_a = config.rnConfig) === null || _a === void 0 ? void 0 : _a.stackProps;
@@ -251,7 +252,7 @@ function createTabNavigate(config) {
 }
 function createStackNavigate(config) {
     var _a;
-    const Stack = createStackNavigator();
+    const Stack = createNativeStackNavigator();
     const pageList = getPageList(config);
     if (pageList.length <= 0)
         return null;
diff --git a/node_modules/@tarojs/router-rn/src/router.tsx b/node_modules/@tarojs/router-rn/src/router.tsx
index 475ab18..29bbbc3 100644
--- a/node_modules/@tarojs/router-rn/src/router.tsx
+++ b/node_modules/@tarojs/router-rn/src/router.tsx
@@ -12,6 +12,7 @@ import BackButton from './view/BackButton'
 import { getTabItemConfig, getTabVisible, setTabConfig, getTabInitRoute, handleUrl } from './utils/index'
 import React from 'react'
 import { TabOptions } from './view/TabBarItem'
+import {createNativeStackNavigator, NativeStackNavigationOptions} from "@react-navigation/native-stack";
 
 interface WindowConfig {
   pageOrientation?: 'auto' | 'portrait' | 'landscape'
@@ -52,7 +53,7 @@ interface PageItem {
 interface RNConfig {
   initialRouteName?: string,
   linking?: string[],
-  screenOptions?: StackNavigationOptions,
+  screenOptions?: NativeStackNavigationOptions,
   tabOptions?: TabOptions,
   tabBarOptions?: Record<string, any>,
   tabProps?: {
@@ -121,7 +122,7 @@ function getHeaderView (title: string, color: string, props: any) {
 }
 
 // screen配置的内容
-function getStackOptions (config: RouterConfig): StackNavigationOptions {
+function getStackOptions (config: RouterConfig): NativeStackNavigationOptions {
   const windowOptions = config.window || {}
   const title = ''
   const headColor = windowOptions.navigationBarTextStyle || 'white'
@@ -325,7 +326,7 @@ function getLinkingConfig (config: RouterConfig) {
 }
 
 function createTabNavigate (config: RouterConfig) {
-  const Stack = createStackNavigator()
+  const Stack = createNativeStackNavigator()
   const pageList = getPageList(config)
   const linking = getLinkingConfig(config)
   const stackProps = config.rnConfig?.stackProps
@@ -361,7 +362,7 @@ function createTabNavigate (config: RouterConfig) {
 }
 
 function createStackNavigate (config: RouterConfig) {
-  const Stack = createStackNavigator()
+  const Stack = createNativeStackNavigator()
   const pageList = getPageList(config)
   if (pageList.length <= 0) return null
   const linking = getLinkingConfig(config)

实际结果

使用 stack

环境信息

👽 Taro v3.5.0-beta.2


  Taro CLI 3.5.0-beta.2 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 16.10.0 - /usr/local/bin/node
      Yarn: 1.22.11 - ~/.nvm/versions/node/v16.10.0/bin/yarn
      npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/components: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/helper: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/mini-runner: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-framework-react: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-alipay: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-jd: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-qq: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-swan: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-tt: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/plugin-platform-weapp: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/react: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/rn-runner: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/router: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/runtime: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/shared: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/taro: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/taro-h5: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/taro-rn: 3.5.0-beta.2 => 3.5.0-beta.2
      @tarojs/webpack-runner: 3.5.0-beta.2 => 3.5.0-beta.2
      babel-preset-taro: 3.5.0-beta.2 => 3.5.0-beta.2
      eslint-config-taro: 3.5.0-beta.2 => 3.5.0-beta.2
      expo: ~45.0.2 => 45.0.4
      react: ^17.0.2 => 17.0.2
      react-native: ^0.68.2 => 0.68.2

[zhiqingchen]

前pr
#11344

[zhiqingchen]

默认使用 Stack，通过配置 useNativeStack 开启

// app.config.json
const AppConfig = {
   rn: {
      useNativeStack: true,
      screenOptions: {} // https://reactnavigation.org/docs/native-stack-navigator#options
   }
}

[zhiqingchen]

c081d97