本文将介绍如何在 React Native 中使用 Navigation 和 Ref，并提供一些示例代码。
Navigation
在 React Native 中，Navigation 是一种管理不同屏幕之间导航的方式。有几种 Navigation 库可供选择，本文将介绍官方的 Navigation 和 React Navigation。
官方 Navigation
React Native 官方提供的 Navigation 组件是一个基于 React 的轻量级导航解决方案。它支持纯 JavaScript 实现，它不是一个独立的导航框架，而是将导航作为 React 组件的一部分。
以下是在 React Native 中使用官方 Navigation 的步骤：
安装
要使用官方 Navigation，必须安装 @react-navigation/native 和 @react-navigation/stack：
npm install @react-navigation/native @react-navigation/stack
导航器
- Stack Navigation
创建一个 StackNavigator：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------------- - ---- --------------------------
------ ---- ---- ---------------
------ ------ ---- -----------------
----- ----- - -----------------------
-------- ----- -
------ -
-----------------
------------- ----------- ---------------- --
------------- ------------- ------------------ --
------------------
--
-
------ ------- ----在 Stack.Navigator 中，我们可以定义屏幕的名称和对应的组件。Stack.Screen 可以设置 navigation prop。
- Drawer Navigation
为了创建一个 DrawerNavigator，我们需要安装 @react-navigation/drawer：
npm install @react-navigation/drawer
创建一个 DrawerNavigator：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------------- - ---- ---------------------------
------ ---- ---- ---------------
------ ------ ---- -----------------
----- ------ - ------------------------
-------- ----- -
------ -
------------------
-------------- ----------- ---------------- --
-------------- ------------- ------------------ --
-------------------
--
-
------ ------- ----在 Drawer.Navigator 中，我们可以定义屏幕的名称和对应的组件。Drawer.Screen 提供了 navigation prop。
React Navigation
React Navigation 是 React Native 中最流行的导航库之一，它提供了不同种类的导航解决方案， 包括 Stack、Drawer、Tab 和 Bottom。
以下是在 React Native 中使用 React Navigation 的步骤：
安装
要使用 React Navigation，必须安装 react-navigation 和 react-navigation-stack：
npm install react-navigation react-navigation-stack
导航器
- Stack Navigation
创建一个 StackNavigator：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------------- - ---- -------------------------
------ ---- ---- ---------------
------ ------ ---- -----------------
----- ----- - -----------------------
-------- ----- -
------ -
-----------------
------------- ----------- ---------------- --
------------- ------------- ------------------ --
------------------
--
-
------ ------- ----在 Stack.Navigator 中，我们可以定义屏幕的名称和对应的组件。Stack.Screen 可以设置 navigation prop。
- Drawer Navigation
为了创建一个 DrawerNavigator，我们需要安装 react-navigation-drawer：
npm install react-navigation-drawer
创建一个 DrawerNavigator：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------------- - ---- --------------------------
------ ---- ---- ---------------
------ ------ ---- -----------------
----- ------ - ------------------------
-------- ----- -
------ -
------------------
-------------- ----------- ---------------- --
-------------- ------------- ------------------ --
-------------------
--
-
------ ------- ----在 Drawer.Navigator 中，我们可以定义屏幕的名称和对应的组件。Drawer.Screen 提供了 navigation prop。
Ref
在 React 中使用 Ref，可以访问组件实例或 DOM 元素。
创建 Ref
-- -------------------- ---- ------- ------ ------ - ------ - ---- -------- -------- ----- - ----- --- - ------------- ------ ---- ---------------- ------------- - ------ ------- ----
使用 Ref
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
-------- ----- -
----- --- - -------------
----- ----------- - -- -- -
--------------------- - ------- ----- ---------
--
------ -
-----
---- ---------------- ------------
------- --------------------------- -----------
------
--
-
------ ------- ----总结
本文介绍了如何在 React Native 中使用 Navigation 和 Ref，并提供了一些示例代码。这些技术将为您的应用程序添加导航功能和更好的控制组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fe1fd95b1f8cacd76d057