入门 - Snack 中的第一个程序

---

Snack 是一个开源的 Expo 平台，可以在其中进行 React Native 编程，并立即看到结果。它会编译并构建用于在不同类型设备或 Android、iOS 或 Web 上执行的包。代码可以快速保存和共享到 Snack。当用户键入代码时，该界面会向用户提供库安装链接。Snack 是一个易于使用且快速的平台，使初学者更容易学习 React Native。用户无需安装任何东西。只需注册，然后登录您的 Expo 帐户，即可开始编写代码。

了解 Expo Snack

要启动程序，只需登录 Snack 并开始键入。Expo Snack 布局显示如下所示的重要部分：

区域 1

这是用户可以命名程序的区域。它还用于保存相同程序或已更改程序的另一个副本。只需更改名称，即可保存新副本。

区域 2

此区域显示项目结构。此项目结构中包含的重要文件夹是 assets 文件夹和 components 文件夹。App.js 是主要的代码文件，而 package.json 显示依赖项。

区域 3

中间的区域是开发人员编写代码的地方。代码使用 javascript 和 JSX 编写。JSX 是 javascript 的扩展，其中使用了标签。React Native 编程很容易完成，无需单独担心模块安装。当用户编写代码时，更改会自动保存，并且开发人员会获得更新所需库的提示。

区域 4

右侧的区域用于立即查看结果。它为用户提供了查看输出在用户移动设备上如何显示的选项。

区域 5

“区域 4”内的此区域显示上部区域中的选项卡，用于选择查看程序输出的选项。它包括在 Android 和 iOS 模拟器上显示结果的选项卡。

区域 6

此区域用于查看错误或更新所需库或模块版本的提示。当程序员键入代码时，它会不断变化。如果用户进行了所有必要的更改并最终确定了程序，则程序将显示“无错误”状态。

区域 7

这显示了 Snack 的版本号。随着 Snack Expo 的不断发展，会进行新的版本更改，用户通常可以选择一些最近的版本。如果用户尝试运行使用当前列表中不可用的旧版本创建的程序，此平台将提供更新提示，用户可以轻松地为新的可用版本设置程序。

在线查看结果

当用户输入代码时，默认情况下会选择 Web 视图，结果会立即显示。但是，用户也可以选择 Android 手机选项或 iOS 模拟器来在线查看结果，然后单击“点击播放”以查看结果。在这里，如果其他用户同时使用模拟器，用户必须在队列中等待。

在用户的移动设备上查看结果

为此，用户必须在个人手机上安装 Expo Go。使用相机扫描二维码以查看结果。

程序代码说明

• 步骤 1 - 导入所需的库/模块。

• 步骤 2 - 创建默认类 MynewAppp1，它扩展了来自 React 的 Component。

• 步骤 3 - 要使输出可见，使用 render() 函数。

• 步骤 4 - render 函数使用 return() 指定查看区域的外观以及输出中将显示的内容。

• 步骤 5 - 如果要在输出中看到多个组件（例如 Text|Button 等），则使用 View 标签。

• 步骤 6 - 样式规范用于布局要与给定标签一起包含的样式。

• 步骤 7 - Text 标签指定将在屏幕上显示的文本。

第一个程序/代码

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

export default class MynewApp extends React.Component {
   render() {
      return (
         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontWeight: 'bold', color: 'brown' }}>Hello, How are You! Lets begin learning </Text>
            <Text>Snack Expo Programming</Text>
         </View>
      );
   }
}

输出

如下所示的输出在线和个人手机上均可见。

在 Android 模拟器上 -

在个人移动设备上 -

结论

本文介绍了在 Expo Snack 上开始编程的方法。首先解释了开源平台，并通过一个小例子说明了编写代码、保存代码以及在线模拟器或个人移动设备上查看输出的方法。