From e9ffe7c9b1d87e7f7c6587f3725f5d0cc88b867c Mon Sep 17 00:00:00 2001 From: tyBrave Date: Thu, 18 Jan 2024 09:05:51 +0000 Subject: [PATCH 1/5] =?UTF-8?q?[Issues:=20#I8UIAD]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-screens=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-screens.md | 52 ++++++++++++++++++++++++++++++++++-- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/1224/react-native-screens.md b/1224/react-native-screens.md index 27247d0d..0477624a 100644 --- a/1224/react-native-screens.md +++ b/1224/react-native-screens.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.2

react-native-screens

@@ -12,6 +12,28 @@

+## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash + +npm i @react-navigation/bottom-tabs --save +npm i @react-navigation/native --save +npm i @react-navigation/native-stack --save +npm i @react-navigation/stack --save +npm i react-native-gesture-handler --save +npm i react-native-reanimated --save +npm i react-native-safe-area-context --save +npm i react-native-screens --save + +``` + + ### 禁用 `react-native-screens` 因为 ArkUI(Navigation、NavRouter、NavDestination)没有代理任何独特功能，且无法映射到 main_page 通过页面容器优化性能，所以 react-native-screens 禁用鸿蒙原生屏幕使用 react-native views 即可，请在您的入口文件中添加以下代码。 (例如. `App.js`): @@ -24,9 +46,35 @@ enableScreens(false); 您还可以通过[`detachInactiveScreens`](https://reactnavigation.org/docs/stack-navigator#detachinactivescreens)在每个导航器中禁用使用原生屏幕。后续待补充各个接口验证情况。 +## 兼容性 + +在以下版本验证 + 1. IDE:4.1.3.313; + SDK:4.1.0.53; + 测试设备：Mate40 pro(NOH-AN00); + Rom:2.0.0.52(C00E52R1P17log); + RNOH:0.72.11。 + ## 属性 -[原库接口文档](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md) 由于使用 RN 的 view 实现相关功能，理论上接口均支持，若有不可用部分欢迎提交 [issue](https://gitee.com/react-native-oh-library/usage-docs/issues). +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---- | ---- | ---- | -------- | -------- | -------- | +| enableScreens|支持原生及其React Native View |function| No | / | Yes | +| enableFreeze |对react-freeze的支持，使用ReactSuspense机制来防止React组件输的部分渲染 | function | No | / | Yes | +| createNativeStackNavigator |提供屏幕切换的能力 | function | No | / | NO | +| NativeStackNavigationProp |切换页面属性的封装 | | No | / | Yes | +| NativeStackNavigationOptions |导航栏属性设置封装 | | No | / | NO | +| FullWindowOverlay |一个组件，可以将其子组件放在其他组件之上 | | No | / | NO | +| SearchBarProps |搜索栏的属性设置封装| | No | / | NO | +| SearchBarCommands |搜索栏的操作封装 | | No | / | NO | +| useTransitionProgress |提供屏幕过度的动画插值器 | function | No | / | NO | +| userReanimatedTransitionProgress \n ReanimatedScreenProvider | 屏幕切换期间调用的帧回调，用于react-native-reanimated 2.0及其以上的版本，并使用ReanimatedScreenProvider进行封装 | function | No | / | NO | +| userHeaderHeight |计算静态标题栏的高度，当屏幕方向发生更改，此值会发生更改 | function | No | / | NO | +| userAnimatedHeaderHeight |动态计算标题栏的高度，此值会随着每个视图布局变化而变化| function | No | / | NO | + + +[原库接口文档](https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md) ，欢迎提交 [issue](https://gitee.com/react-native-oh-library/usage-docs/issues). + ## 开源协议 -- Gitee From 3c8a3e80299cecf7bb68a62ec8afcfec8ba6093c Mon Sep 17 00:00:00 2001 From: tyBrave Date: Fri, 19 Jan 2024 08:27:47 +0000 Subject: [PATCH 2/5] =?UTF-8?q?[Issues:=20#I8XI9V]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-screens=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-screens.md | 63 ++++++++++++++++++++++++++++++++++-- 1 file changed, 61 insertions(+), 2 deletions(-) diff --git a/1224/react-native-screens.md b/1224/react-native-screens.md index 0477624a..9137c460 100644 --- a/1224/react-native-screens.md +++ b/1224/react-native-screens.md @@ -34,6 +34,62 @@ npm i react-native-screens --save ``` +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { NavigationContainer, ParamListBase } from "@react-navigation/native"; +import { ScrollView, Button, Tesxt } from "react-native"; +import { NativeStackNavigationProp } from "react-native-screens"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { createStackNavigator } from "@react-navigation/stack"; +import { enableScreens } from "react-native-screens"; + + +enableScreens(false) +const Stack = createStackNavigator(); + +function NativeNavigation() { + return ( + + + + + + ) +} + +const Tab = createBottomTabNavigator(); +const NestedNavigator = () => ( + + + +) + +function Home({navigation}:{navigation:NativeStackNavigationProp}){ + return ( + + +