跳到主要内容

React 基础

React Native 运行在 React 上,这是一个流行的开源库,用于使用 JavaScript 构建用户界面。要充分利用 React Native,了解 React 本身会有所帮助。本节可以帮助您入门,也可以作为复习课程。

我们将涵盖 React 背后的核心概念

  • 组件
  • JSX
  • props
  • state

如果您想深入了解,我们鼓励您查看 React 的官方文档

你的第一个组件

本 React 介绍的其余部分将在示例中使用猫:友好、平易近人的生物,它们需要名字和一个可以工作的咖啡馆。这是你的第一个 Cat 组件

方法如下:要定义你的 Cat 组件,首先使用 JavaScript 的 import 导入 React 和 React Native 的 Text 核心组件

tsx
import React from 'react';
import {Text} from 'react-native';

你的组件以函数形式开始

tsx
const Cat = () => {};

你可以将组件视为蓝图。函数组件返回的任何内容都将渲染为 React 元素。 React 元素允许你描述你想要在屏幕上看到的内容。

这里 Cat 组件将渲染一个 <Text> 元素

tsx
const Cat = () => {
return <Text>Hello, I am your cat!</Text>;
};

你可以使用 JavaScript 的 export default 导出你的函数组件,以便在整个应用程序中使用,如下所示

tsx
const Cat = () => {
return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

这是导出组件的多种方法之一。这种导出方式与 Snack Player 配合得很好。但是,根据你的应用程序文件结构,你可能需要使用不同的约定。这份关于 JavaScript 导入和导出的实用速查表会有帮助。

现在仔细看看那个 return 语句。<Text>Hello, I am your cat!</Text> 使用了一种 JavaScript 语法,使得编写元素变得方便:JSX。

JSX

React 和 React Native 使用 JSX,这是一种允许你在 JavaScript 中编写元素的语法,例如:<Text>Hello, I am your cat!</Text>。React 文档有一个关于 JSX 的全面指南,你可以参考它来学习更多。因为 JSX 是 JavaScript,你可以在其中使用变量。在这里,你为猫声明了一个名字 name,并用花括号将其嵌入到 <Text> 中。

任何 JavaScript 表达式都可以在花括号之间工作,包括函数调用,例如 {getFullName("Rum", "Tum", "Tugger")}

你可以把花括号想象成在 JSX 中创建了一个通往 JS 功能的门户!

由于 JSX 包含在 React 库中,如果你的文件顶部没有 import React from 'react',它将无法工作!

自定义组件

你已经了解了 React Native 的核心组件。React 允许你将这些组件相互嵌套以创建新组件。这些可嵌套、可重用的组件是 React 范式的核心。

例如,你可以将 TextTextInput 嵌套在下面的 View 中,React Native 会将它们一起渲染

开发者注意事项

如果你熟悉 Web 开发,<View><Text> 可能会让你想起 HTML!你可以把它们看作应用程序开发中的 <div><p> 标签。

你可以使用 <Cat> 多次且在多个地方渲染此组件,而无需重复代码

任何渲染其他组件的组件都是父组件。在这里,Cafe 是父组件,每个 Cat 都是子组件。

你可以在咖啡馆里放任意多只猫。每个 <Cat> 都渲染一个唯一的元素——你可以使用 props 进行自定义。

属性

Props 是“properties”(属性)的缩写。Props 允许你自定义 React 组件。例如,在这里你为每个 <Cat> 传递一个不同的 name,供 Cat 渲染

React Native 的大多数核心组件也可以通过 props 进行自定义。例如,当使用 Image 时,你可以向它传递一个名为 source 的 prop 来定义它显示什么图片

Image许多不同的 props,包括 style,它接受一个包含设计和布局相关属性-值对的 JS 对象。

注意 style 的宽度和高度周围的双花括号 {{ }}。在 JSX 中,JavaScript 值通过 {} 引用。如果你传递的不是字符串而是其他类型的数据作为 props,例如数组或数字:<Cat food={["fish", "kibble"]} age={2} />,这会很方便。但是,JS 对象用花括号表示:{width: 200, height: 200}。因此,要在 JSX 中传递 JS 对象,你必须将对象包裹在另一对花括号中:{{width: 200, height: 200}}

你可以用 props 和核心组件 TextImage 以及 View 构建许多东西!但要构建交互式应用,你需要状态。

状态

虽然你可以将 props 视为用于配置组件如何渲染的参数,但状态就像组件的个人数据存储。状态对于处理随时间变化或来自用户交互的数据很有用。状态让你的组件拥有记忆!

通常来说,在组件渲染时使用 props 配置它。使用 state 来跟踪你期望随时间变化的任何组件数据。

下面的例子发生在一家猫咪咖啡馆里,两只饥饿的猫正在等着被喂食。它们的饥饿感(我们期望它会随时间变化,不像它们的名字)被存储为状态。要喂食猫咪,按下它们的按钮——这将更新它们的状态。

你可以通过调用 React 的 useState Hook 来向组件添加状态。Hook 是一种函数,它允许你“钩入”React 特性。例如,useState 是一种 Hook,它允许你向函数组件添加状态。你可以在 React 文档中了解其他类型的 Hooks。

首先,你需要像这样从 React 导入 useState

tsx
import React, {useState} from 'react';

然后,你通过在其函数内部调用 useState 来声明组件的状态。在此示例中,useState 创建了一个 isHungry 状态变量

tsx
const Cat = (props: CatProps) => {
const [isHungry, setIsHungry] = useState(true);
// ...
};

你可以使用 useState 来跟踪任何类型的数据:字符串、数字、布尔值、数组、对象。例如,你可以使用 const [timesPetted, setTimesPetted] = useState(0) 来跟踪猫被抚摸的次数!

调用 useState 会做两件事

  • 它创建了一个带有初始值的“状态变量”——在本例中,状态变量是 isHungry,其初始值为 true
  • 它创建了一个函数来设置该状态变量的值——setIsHungry

你使用什么名称并不重要。但将模式想象成 [<getter>, <setter>] = useState(<initialValue>) 会很方便。

接下来,你添加 Button 核心组件并为其提供一个 onPress prop

tsx
<Button
onPress={() => {
setIsHungry(false);
}}
//..
/>

现在,当有人按下按钮时,onPress 将触发,调用 setIsHungry(false)。这会将状态变量 isHungry 设置为 false。当 isHungry 为 false 时,Buttondisabled prop 设置为 true,并且其 title 也会改变

tsx
<Button
//..
disabled={!isHungry}
title={isHungry ? 'Give me some food, please!' : 'Thank you!'}
/>

你可能已经注意到,尽管 isHungry 是一个 const,但它似乎可以重新赋值!发生的情况是,当调用像 setIsHungry 这样的状态设置函数时,它的组件将重新渲染。在这种情况下,Cat 函数将再次运行——这次,useState 将给出 isHungry 的下一个值。

最后,将你的猫放入 Cafe 组件中

tsx
const Cafe = () => {
return (
<>
<Cat name="Munkustrap" />
<Cat name="Spot" />
</>
);
};

看到上面的 <></> 了吗?这些 JSX 片段是片段。相邻的 JSX 元素必须被包裹在一个封闭标签中。片段允许你这样做,而无需嵌套一个额外的、不必要的包装元素,如 View


现在你已经涵盖了 React 和 React Native 的核心组件,让我们通过查看处理 <TextInput> 来更深入地探讨其中一些核心组件。