diff --git a/1224/react-native-screens.md b/1224/react-native-screens.md index 27247d0d240cd3f00458df35ecbdd410a6fcdc09..3ae28ee852feebcbaf2c4e8fabfd25fdf3630cb9 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,7 +12,99 @@

-### 禁用 `react-native-screens` +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **yarn** + +```bash +yarn add @react-navigation/bottom-tabs +yarn add @react-navigation/native +yarn add @react-navigation/native-stack +yarn add @react-navigation/stack +yarn add @react-native-oh-tpl/react-native-gesture-handler +yarn add react-native-reanimated +yarn add @react-native-oh-tpl/react-native-safe-area-context +yarn add react-native-screens + +``` +#### **npm** + +```bash +npm install @react-navigation/bottom-tabs +npm install @react-navigation/native +npm install @react-navigation/native-stack +npm install @react-navigation/stack +npm install @react-native-oh-tpl/react-native-gesture-handler +npm install react-native-reanimated +npm install @react-native-oh-tpl/react-native-safe-area-context +npm install react-native-screens + +``` + + +声明:[@react-native-oh-tpl/react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/1224/react-native-safe-area-context.md)和[@react-native-oh-tpl/react-native-gesture-handler](https://gitee.com/react-native-oh-library/usage-docs/blob/master/1224/react-native-gesture-handler.md)需要进行额外的配置,详情请去对应的文档查看。 + +下面的代码展示了这个库的基本使用场景: + +```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 ( + + +