学习基础知识
React Native 类似于 React,但它使用原生组件而不是 Web 组件作为构建块。因此,要理解 React Native 应用的基本结构,您需要了解一些基本的 React 概念,例如 JSX、组件、state
和 props
。如果您已经了解 React,您仍然需要学习一些 React Native 特定的内容,例如原生组件。本教程面向所有受众,无论您是否有 React 经验。
我们开始吧。
Hello World
按照我们人民的古老传统,我们必须首先构建一个除了说“Hello, world!”之外什么也不做的应用程序。就是这样
如果您好奇,可以直接在 Web 模拟器中试用示例代码。您也可以将其粘贴到您的 App.js
文件中,以在本地机器上创建真实的应用程序。
这是怎么回事?
- 首先,我们需要导入
React
才能使用JSX
,然后JSX
将转换为每个平台的原生组件。 - 在第 2 行,我们从
react-native
导入Text
和View
组件。
然后我们定义 HelloWorldApp
函数,它是一个函数组件,其行为方式与 Web 上的 React 相同。此函数返回一个带有某些样式和一个 Text
作为其子组件的 View
组件。
Text
组件允许我们渲染文本,而 View
组件渲染一个容器。这个容器应用了多种样式,让我们分析一下每种样式的作用。
我们发现的第一个样式是 flex: 1
,flex
属性将定义您的项目如何“填充”主轴上的可用空间。由于我们只有一个容器,它将占据父组件的所有可用空间。在这种情况下,它是唯一的组件,因此它将占据所有可用的屏幕空间。
接下来的样式是 justifyContent
: "center"。这会将容器的子项沿容器主轴居中对齐。最后,我们有 alignItems
: "center",这会将容器的子项沿容器交叉轴居中对齐。
这里有些东西可能看起来不像 JavaScript。别慌。这就是未来。
首先,ES2015(也称为 ES6)是 JavaScript 的一组改进,现在是官方标准的一部分,但尚未被所有浏览器支持,因此通常尚未用于 Web 开发。React Native 附带 ES2015 支持,因此您可以无需担心兼容性地使用这些东西。上述示例中的 import
、export
、const
和 from
都是 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
。这是一个示例
- TypeScript
- JavaScript
使用 name
作为 prop 允许我们自定义 Greeting
组件,因此我们可以将该组件用于每个问候语。此示例还在 JSX 中使用了 Greeting
组件。能够做到这一点正是 React 如此酷的原因。
这里另一个新事物是 View
组件。View
作为其他组件的容器很有用,有助于控制样式和布局。
有了 props
以及基本的 Text
、Image
和 View
组件,您可以构建各种静态屏幕。要了解如何使您的应用程序随时间变化,您需要了解 State。
State
与只读且不应修改的 props 不同,state
允许 React 组件根据用户操作、网络响应和其他任何情况,随时间改变其输出。
React 中 state 和 props 的区别是什么?
在 React 组件中,props 是我们从父组件传递给子组件的变量。同样,state 也是变量,不同之处在于它们不是作为参数传递的,而是组件内部初始化和管理的。
React 和 React Native 在处理 state 方面有区别吗?
// 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;
}
// 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
方面没有区别。您可以在类组件和使用钩子的函数组件中使用组件的 state!
在以下示例中,我们将使用类显示上面的计数器示例。