跳转到主要内容

学习基础知识

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 中的相同。此函数返回一个 View 组件,其中包含一些样式和一个Text 作为其子组件。

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,除了你使用 React 组件而不是像 <div><span> 这样的 Web 元素。在本例中,<Text> 是一个 核心组件,用于显示一些文本,而 View 类似于 <div><span>

组件

所以这段代码定义了一个新的 Component,即 HelloWorldApp。当你构建 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 也是变量,不同之处在于它们不是作为参数传递的,而是由组件在内部初始化和管理。

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

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',
},
});

如上所示,React 和 React Native 在处理 state 方面没有区别。你可以在类组件和函数式组件中使用hooks 来使用组件的 state!

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