简明 React Native 中文教程第 6 章：Nav と Ref と一人 React Native 再入门-JavaScript中文网-JavaScript教程资源分享门户

本文将介绍如何在 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：

// javascriptcn.com 代码示例
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './pages/Home';
import Detail from './pages/Detail';

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Detail" component={Detail} />
    </Stack.Navigator>
  );
}

export default App;

在 Stack.Navigator 中，我们可以定义屏幕的名称和对应的组件。Stack.Screen 可以设置 navigation prop。

Drawer Navigation

为了创建一个 DrawerNavigator，我们需要安装 @react-navigation/drawer：

npm install @react-navigation/drawer

创建一个 DrawerNavigator：

// javascriptcn.com 代码示例
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import Home from './pages/Home';
import Detail from './pages/Detail';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Detail" component={Detail} />
    </Drawer.Navigator>
  );
}

export default App;

在 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：

// javascriptcn.com 代码示例
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './pages/Home';
import Detail from './pages/Detail';

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Detail" component={Detail} />
    </Stack.Navigator>
  );
}

export default App;

在 Stack.Navigator 中，我们可以定义屏幕的名称和对应的组件。Stack.Screen 可以设置 navigation prop。

Drawer Navigation

为了创建一个 DrawerNavigator，我们需要安装 react-navigation-drawer：

npm install react-navigation-drawer

创建一个 DrawerNavigator：

// javascriptcn.com 代码示例
import React from 'react';
import { createDrawerNavigator } from 'react-navigation-drawer';
import Home from './pages/Home';
import Detail from './pages/Detail';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Detail" component={Detail} />
    </Drawer.Navigator>
  );
}

export default App;

在 Drawer.Navigator 中，我们可以定义屏幕的名称和对应的组件。Drawer.Screen 提供了 navigation prop。

Ref

在 React 中使用 Ref，可以访问组件实例或 DOM 元素。

创建 Ref

// javascriptcn.com 代码示例
import React, { useRef } from 'react';

function App() {
  const ref = useRef(null);

  return <div ref={ref}>Hello, world!</div>;
}

export default App;

使用 Ref

// javascriptcn.com 代码示例
import React, { useRef } from 'react';

function App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.innerHTML = 'Hello, React Native!';
  };

  return (
    <div>
      <div ref={ref}>Hello, world!</div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

总结

本文介绍了如何在 React Native 中使用 Navigation 和 Ref，并提供了一些示例代码。这些技术将为您的应用程序添加导航功能和更好的控制组件。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651fe1fd95b1f8cacd76d057