学习基础知识

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

让我们开始吧。

Hello World

根据我们祖先的古老传统，我们首先必须构建一个除了说“Hello, world！”之外什么也不做的应用程序。它就在这里

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

这里发生了什么？

首先，我们需要导入 React 才能使用 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>。

组件

因此，此代码正在定义 HelloWorldApp，一个新的 Component。在构建 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 组件，您可以构建各种静态屏幕。要了解如何使您的应用程序随时间推移而发生变化，您需要了解状态。

状态

与只读的 props 不同，且不应修改，state 允许 React 组件随时间推移响应用户操作、网络响应和其他任何内容来更改其输出。

React 中状态和 props 之间有什么区别？

在 React 组件中，props 是我们从父组件传递到子组件的变量。类似地，状态也是变量，不同之处在于它们不是作为参数传递的，而是组件在内部初始化和管理它们。

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 没有任何区别。您可以使用类和使用 hook 的函数组件中的组件状态！

在下面的示例中，我们将使用类显示与上面相同的计数器示例。

Hello World​

这里发生了什么？​

组件​

Props​

状态​

React 中状态和 props 之间有什么区别？​

React 和 React Native 在处理状态方面是否存在差异？​

Hello World

这里发生了什么？

组件

Props

状态

React 中状态和 props 之间有什么区别？

React 和 React Native 在处理状态方面是否存在差异？