跳到主内容

学习基础知识

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

我们开始吧。

Hello World

根据我们民族的古老传统,我们必须首先构建一个除了显示“Hello, world!”之外什么也不做的应用。代码如下:

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

这里发生了什么?

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

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

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

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

接下来的样式是 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,但不同的是,你使用的是 React 组件,而不是 <div><span> 等 Web 元素。在这种情况下,<Text> 是一个 核心组件,用于显示一些文本,而 View 则类似于 <div><span>

组件

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

Props

大多数组件在创建时可以通过不同的参数进行定制。这些创建参数被称为 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 方面没有区别。你可以在类组件和函数组件中使用 hooks 来使用组件的 state!

在下面的示例中,我们将展示上面相同的计数器示例,使用类来实现。