跳到主要内容

学习基础知识

React Native 类似于 React,但它使用原生组件而不是 Web 组件作为构建块。因此,要理解 React Native 应用的基本结构,您需要了解一些基本的 React 概念,例如 JSX、组件、stateprops。如果您已经了解 React,您仍然需要学习一些 React Native 特定的内容,例如原生组件。本教程面向所有受众,无论您是否有 React 经验。

我们开始吧。

Hello World

按照我们人民的古老传统,我们必须首先构建一个除了说“Hello, world!”之外什么也不做的应用程序。就是这样

如果您好奇,可以直接在 Web 模拟器中试用示例代码。您也可以将其粘贴到您的 App.js 文件中,以在本地机器上创建真实的应用程序。

这是怎么回事?

  1. 首先,我们需要导入 React 才能使用 JSX,然后 JSX 将转换为每个平台的原生组件。
  2. 在第 2 行,我们从 react-native 导入 TextView 组件。

然后我们定义 HelloWorldApp 函数,它是一个函数组件,其行为方式与 Web 上的 React 相同。此函数返回一个带有某些样式和一个 Text 作为其子组件的 View 组件。

Text 组件允许我们渲染文本,而 View 组件渲染一个容器。这个容器应用了多种样式,让我们分析一下每种样式的作用。

我们发现的第一个样式是 flex: 1flex 属性将定义您的项目如何“填充”主轴上的可用空间。由于我们只有一个容器,它将占据父组件的所有可用空间。在这种情况下,它是唯一的组件,因此它将占据所有可用的屏幕空间。

接下来的样式是 justifyContent: "center"。这会将容器的子项沿容器主轴居中对齐。最后,我们有 alignItems: "center",这会将容器的子项沿容器交叉轴居中对齐。

这里有些东西可能看起来不像 JavaScript。别慌。这就是未来

首先,ES2015(也称为 ES6)是 JavaScript 的一组改进,现在是官方标准的一部分,但尚未被所有浏览器支持,因此通常尚未用于 Web 开发。React Native 附带 ES2015 支持,因此您可以无需担心兼容性地使用这些东西。上述示例中的 importexportconstfrom 都是 ES2015 特性。如果您不熟悉 ES2015,您可以通过阅读本教程等示例代码来学习它。如果您愿意,此页面对 ES2015 特性有很好的概述。

此代码示例中另一个不寻常的地方是 <View><Text>Hello world!</Text></View>。这是 JSX - 一种用于在 JavaScript 中嵌入 XML 的语法。许多框架使用专门的模板语言,允许您在标记语言中嵌入代码。在 React 中,这反过来了。JSX 允许您在代码中编写标记语言。它看起来像 Web 上的 HTML,但不是像 <div><span> 这样的 Web 元素,而是使用 React 组件。在此示例中,<Text> 是一个显示文本的核心组件View 类似于 <div><span>

组件

所以这段代码定义了 HelloWorldApp,一个新的 Component。当您构建 React Native 应用程序时,您会创建很多新组件。您在屏幕上看到的任何东西都是某种组件。

属性

大多数组件在创建时都可以通过不同的参数进行定制。这些创建参数称为 props。

您自己的组件也可以使用 props。这允许您创建一个可以在应用程序中许多不同地方使用的单个组件,每个地方的属性略有不同。在函数组件中引用 props.YOUR_PROP_NAME,在类组件中引用 this.props.YOUR_PROP_NAME。这是一个示例

使用 name 作为 prop 允许我们自定义 Greeting 组件,因此我们可以将该组件用于每个问候语。此示例还在 JSX 中使用了 Greeting 组件。能够做到这一点正是 React 如此酷的原因。

这里另一个新事物是 View 组件。View 作为其他组件的容器很有用,有助于控制样式和布局。

有了 props 以及基本的 TextImageView 组件,您可以构建各种静态屏幕。要了解如何使您的应用程序随时间变化,您需要了解 State

State

只读且不应修改的 props 不同,state 允许 React 组件根据用户操作、网络响应和其他任何情况,随时间改变其输出。

React 中 state 和 props 的区别是什么?

在 React 组件中,props 是我们从父组件传递给子组件的变量。同样,state 也是变量,不同之处在于它们不是作为参数传递的,而是组件内部初始化和管理的。

React 和 React Native 在处理 state 方面有区别吗?

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
const [count, setCount] = useState(0);

return (
<div className="container">
<p>You clicked {count} times</p>
<button
onClick={() => setCount(count + 1)}>
Click me!
</button>
</div>
);
};


// CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}

tsx
// React Native Counter Example using Hooks!

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';

const App = () => {
const [count, setCount] = useState(0);

return (
<View style={styles.container}>
<Text>You clicked {count} times</Text>
<Button
onPress={() => setCount(count + 1)}
title="Click me!"
/>
</View>
);
};

// React Native Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

如上所示,ReactReact Native 在处理 state 方面没有区别。您可以在类组件和使用钩子的函数组件中使用组件的 state!

在以下示例中,我们将使用类显示上面的计数器示例。