学习基础知识
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 中的相同。此函数返回一个 View
组件,其中包含一些样式和一个Text
作为其子组件。
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,除了你使用 React 组件而不是像 <div>
或 <span>
这样的 Web 元素。在本例中,<Text>
是一个 核心组件,用于显示一些文本,而 View
类似于 <div>
或 <span>
。
组件
所以这段代码定义了一个新的 Component
,即 HelloWorldApp
。当你构建 React Native 应用时,你会经常创建新的组件。你在屏幕上看到的任何东西都是某种组件。
Props
大多数组件在创建时都可以使用不同的参数进行自定义。这些创建参数称为 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 也是变量,不同之处在于它们不是作为参数传递的,而是由组件在内部初始化和管理。
在处理 state 方面,React 和 React Native 之间有区别吗?
// 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
方面没有区别。你可以在类组件和函数式组件中使用hooks 来使用组件的 state!
在下面的示例中,我们将展示使用类的相同上述计数器示例。