入门 - Snack 中的第一个程序
Snack 是一个开源的 Expo 平台，React Native 编程可以在此进行，并且结果可以立即查看。它会编译并构建 bundle，以便在不同类型的设备上执行，包括 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 的不断发展，新版本不断更新，用户通常可以选择一些最新版本。如果用户尝试运行使用列表中当前不可用的旧版本编写的程序，该平台将提供更新提示，用户可以轻松地将程序设置为新的可用版本。
通过在线查看结果
当用户输入代码时，默认选择 Web 视图，结果会立即显示。但是，用户也可以选择使用 Android 手机或 iOS 模拟器在线查看结果，然后点击"点击播放"即可查看结果。如果其他用户同时使用模拟器，用户必须排队等待。
在用户的移动设备上查看结果
为此，用户必须在个人移动设备上安装 Expo Go。使用摄像头扫描二维码即可查看结果。
程序代码说明
步骤 1 − 导入所需的库/模块。
步骤 2 − 创建默认类 MynewAppp1，该类扩展了 React 的 Component。
步骤 3 − 使用 render() 函数使输出可见。
步骤 4 − render 函数使用 return() 指定查看区域的外观以及输出中显示的内容。
步骤 5 − 如果要在输出中显示多个组件(例如 Text|Button 等)，则使用 View 标签。
步骤 6 − Style 规范用于布局要包含的样式以及给定的标签。
步骤 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 上开始编程。首先，我们介绍了这个开源平台，并通过一个小示例说明了编写代码、保存代码的过程，以及在在线模拟器或个人移动设备上查看输出的方法。
