我需要了解关于来自 React JS 的 React Native 的哪些信息？

这篇文章适合那些对 React Native 感兴趣，并且有 React JS 使用经验的人。他们知道能够进行移动和 Web 开发有助于提升自己的工作前景，但同时也想知道使用起来有多简单，以免在阅读文档（其实文档本身就很棒，你应该看看）之前浪费太多时间。

入门

React Native 的设置非常简单，所以绝对不要因此而却步。只需不到五分钟，你就能构建一个可以在手机上显示的应用。

我们将使用 Expo CLI 快速上手（两者的区别请见此处，Expo 的使用限制请见此处）。只要您使用的是 Node 12+ 版本，就可以使用 npm 安装并创建新项目。

npm install -g expo-cli

expo init MyFirstProject
cd MyFirstProject
npm start

最基本的设置就是这样。现在你已经准备好开始开发你的应用了（阅读完本文的其余部分，了解 React JS 和 React Native 之间的基本区别后）。

显示选项

运行npm start（或expo start）的方式与 React JS 一样，只是打开的浏览器窗口会为您提供一些有关如何呈现项目的选项。

您会看到这些菜单选项

以及二维码

• 最快但最无趣的选项：在 Web 浏览器中运行。
  这与 React JS 完全相同。新标签页会打开，并显示来自 App.js 的欢迎消息，或者你选择渲染的任何内容。保存后会自动更新浏览器中的代码。

• 仍然相当快捷，而且绝对非常有趣的选项：二维码。
  如果你在移动设备上下载了 Expo Go 应用，就可以使用应用中的二维码扫描功能（前提是两台设备处于同一网络）在手机上展示你的项目。扫描后，应用会记住该项目，方便你以后再次查看。说实话，这是我最喜欢的选项。

• 设置速度较慢，但​​可能是最实用的选择：iOS/Android 模拟器。
  在自己的手机上使用模拟器确实很酷，但对于长期开发来说，低头看着手机不如在屏幕上直接在代码旁边放一个模拟器/仿真器更高效。不过，要实现这一点，你需要 Xcode 和 Android Studio，而首次安装和配置它们可能需要相当长的时间。

选择适合您目标的选项，让我们进入重点：这仅仅是带有一些新变化的 React JS，还是我必须学习全新的语法？

React Native 有何不同？

这绝不是一个完整的列表，但以下是与 React JS 的四个重大差异，我们需要解决这些差异才能快速熟悉 React Native。一旦你开始从基础开始学习，如果你需要什么，这里可能有一个合适的组件。

没有 HTML 语法

这是 React JS 中一个基本的 Welcome 组件的样子

function Welcome(){
  return(
    <div>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </div>
  )
}

现在，我知道这里所有看起来像 HTML 的东西实际上都是 JSX，但关键在于，这些 JSX 正在努力匹配 HTML 的语法。React Native 仍然使用 JSX，但不允许使用任何类似 HTML 的组件。

鉴于我们不再面向 Web 开发，这很合理，但仍需要一些调整。要在 React Native 中重新创建上述功能，我们必须使用它的一些核心组件。

注意： 以下所有组件都需要通过名称导入才能使用。别忘了导入！

Div 变成 View / ScrollView

React Native 中标签的简单对应物<div>是<View>组件。它们的行为几乎完全相同（在嵌套、样式等方面），并且对于我们的例子来说，切换起来<div>非常快捷且轻松。

import {View} from 'react-native'

function Welcome(){
  return(
    <View>
      <h1>Welcome to my React App!</h1>
      <h3>Log in below</h4>
      <UserLoginForm />
    </View>
  )
}

这里的一个区别是视图不可滚动，所以如果我们希望这个 Welcome 组件的全部或部分可滚动，我们就必须将组件的该部分包装在里面，<ScrollView>或者完全替换<View>。

注意： ScrollView 必须有高度限制才能正常工作。更多信息请见此处

文本组件

我们已经修复了<div>错误，现在该如何处理这些<h1>和<h3>标签呢？答案是<Text>：React Native 中几乎所有文本的简单解决方案。最接近的直接比较对象<Text>是<p>标签。

import {View, Text} from 'react-native'

function Welcome(){
  return(
    <View>
      <Text>Welcome to my React App!</Text>
      <Text>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

不再出错！至少，假设我UserLoginForm在其他地方编写了一个组件并正确导入/导出，就不会出现错误。但你可能注意到了一个小问题。在我们最初的 Welcome 中，我们有两种不同的标题大小，但现在我们只有两个相同的文本组件。这是因为 React Native 中没有单独的标题文本组件。我们必须额外添加一个小步骤，自己设置样式。

样式表组件

正如 React Native 中没有 HTML 一样，它也没有 CSS。不过不用担心，StyleSheet 组件与 React Native 非常相似，你几乎感觉不到它们的区别。内联样式仍然是一种选择：

import {View, Text} from 'react-native'

function Welcome(){
  return(
    <View>
      <Text style={{fontSize: 40}}>Welcome to my React App!</Text>
      <Text style={{fontSize: 20}}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

但是，您看到的最常见的样式是通过在常量下创建一个对象，styles并使用适当元素的键。

import {View, Text, StyleSheet} from 'react-native' // NEW IMPORT

const styles = StyleSheet.create({
  title: {
    fontSize: 40
  },
  subTitle: {
    fontSize: 20
  }
})

function Welcome(){
  return(
    <View>
      <Text style={styles.title}>Welcome to my React App!</Text>
      <Text style={styles.subTitle}>Log in below</Text>
      <UserLoginForm />
    </View>
  )
}

好了，我们修复了所有错误，并在 React JS 中匹配了我们一开始的代码（尽管字体大小数字可能与 an<h1>和 an不完全匹配<h3>）。文档对样式的解释很详细，所以我就不在这里深入讨论了。

注意： React Native 中一个容易被忽视的区别是样式表数字上没有单位（例如“px”）。

React Native 中有什么相同之处？

简而言之：很多！显然，构建原生应用会面临各种挑战，需要解决，尤其是在项目变得越来越复杂的情况下。但好消息是，基本原理是一样的。

我不会逐一列出每个相同的事物（无论如何，差异往往要显著得多），但我认为 React JS 开发人员会欣慰地发现，他们已经知道如何在 React Native 中做到这一点，甚至无需尝试。

构建组件肯定是最重要的，因为组件是 React 的核心，在 React Native 中对组件的结构和使用方式进行重大改动会非常麻烦。虽然没人期待这里会有太大的变化（它们显然是由同一批人开发的，而且可以协同工作），但正是这种变化让学习的决定变得不那么令人畏惧。

• 我还能构建类组件吗？是的。
• 函数式组件？是的。
• 本地状态和 props？完全一样。
• 钩子？当然了。
• 事件处理？语法略有不同，但工作原理相同。
• 获取请求？一样。
• 如果我想使用 Async/Await 怎么办？随意！

你明白了。你已经对 React Native 的了解比你想象的要多得多！

如果你还没有具体的项目想法，可以参考很多很棒的教程。所以，如果你有 React JS 背景，并且正在考虑 React Native，那就没有理由不尝试一下了。它的设置非常简单，即使只是随便玩玩也很有趣。