云IDE：Expo Snack：聚焦于React Native开发的WebIDE

Myth丶恋晨 2022-12-01 12:28 186阅读 0赞

相较于其他的WebIDE，Expo Snack独树一帜，聚焦于React Native开发的WebIDE，相对也较有特点，通过这篇文章整理和总结一下。

--------------------

# Expo定位与特性 #

Expo 自身定位为下一代iOS和Android的应用开发提供了免费、开源和完整的框架和工具，可以更快速的进行基于React Native的移动应用的开发。具有很多特性，包括：

*  更容易地构建通用的原生应用：Expo使得用户只使用JavaScript构建通用的原生应用更加容易。使得开发者可以使用自己更喜欢的工具去写React Native组件而不需要过多关注Xcode或者Android Studio，同时Expo还提供了Expo SDK这样一个支撑更多功能的iOS和Android的原生API。
 *  原生特性之加速度传感器：当设备移动时用于获取加速度传感器设备的状态变化
 *  原生特性之社交认证：启用Facebook和Google原生SDK的日志支持，支持基于浏览器的认证流程。
 *  原生特性之相机：流方式处理相机摄影的预览，保存相片，设定硬件参数比如聚焦和白平衡相关（white balance）。
 *  原生特性之文件系统：保存和读取文档和用户所使用的其他所需数据。
 *  原生特性之图片选择器：导入和操作保存在设备上的图片或者视频，包括共享的相机卷。
 *  原生特性之定位：构建位置敏感的应用，可以获取或者订阅位置变化信息来确认位置的设备位置的变化。
 *  原生特性之原生图形处理：包括一个名为EXGL的和WebGL兼容的API，加入流行的诸如THREE.js之类的JS图形处理库，利用真正的原生图像处理。
 *  原生特性之推送通知：只需要几行JS代码就可以发送或者接收跨平台的推送通知。
 *  …

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 开发工具 #

Expo提供了多种开发工具，Expo Snack只是其中一种。

## Expo Client ##

*  用于在发布之前运行项目，通过扫描二维码打开工程，目前版本需要下载IPA2.16.0 或者APK 2.16.1.
 *  GitHub项目开源地址：[https://github.com/expo/expo][https_github.com_expo_expo]

## Expo CLI ##

*  用户构建、启动和发布Expo项目，可以通过如下命令即可进行安装

> 执行命令：npm install expo-cli --global

## Expo SDK ##

*  用于在Expo项目中对原生设备进行访问的API库
 *  GitHub项目开源地址：[https://github.com/expo/expo][https_github.com_expo_expo]

Expo SDK对于React Native NPM版本的支持和对应情况如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]

## Expo Snack ##

*  无需下载和环境安装准备，用于通过在浏览器的方式使用React Native，可以用于在浏览器中访问React Native项目
 *  GitHub项目开源地址：[https://github.com/expo/expo][https_github.com_expo_expo]
 *  在线地址：[https://snack.expo.io/][https_snack.expo.io]

--------------------

# 使用体验 #

## 体验示例1 ##

*  点击：https://snack.expo.io  
    选中展示的方式为iOS
 *  修改代码并确认实时显示信息  
    修改如下内容：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]

继续修改如下显示信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 2]  
可以看到右侧页面预览信息实时得到了更新，另外也可以点击Android确认相同代码的显示情况。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 3]  
另外还可以使用自己的设备，需要下载Repo Client，Android需要通过Google Play，安装之后通过扫描二维码即可在在自己的手机设备上进行结果确认。

--------------------

## 体验示例2 ##

*  使用如下代码示例确认结果

import React from 'react';
    import {  Image, StyleSheet, Text, View } from 'react-native';
    
    export default function App() { 
      return (
        <View style={ styles.container}>
          <Image source={ {  uri: "https://i.imgur.com/TkIrScD.png" }} style={ {  width: 305, height: 159 }} />
        
          <Text style={ { color: '#888', fontSize: 18}}> 
            To share a photo from your phone with a friend, just press the button below!
          </Text>
        </View>
      );
    }
    
    const styles = StyleSheet.create({ 
      container: { 
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

*  iOS结果确认  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 4]
 *  Android结果确认  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 5]

--------------------

# 总结 #

相较于其他云IDE，Expo Snack主要采用React Native方式来解决移动应用开发的云端在线开发环境的问题。

# 参考文档 #

https://expo.io/learn  
https://expo.io/tools\#snack  
https://docs.expo.io/tutorial/  
https://snack.expo.io/

[https_github.com_expo_expo]: https://github.com/expo/expo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4a3c7a4cf84341c8bc164a80667c199b.png
[https_snack.expo.io]: https://snack.expo.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/09dccb46b3f94325a35af19ce7be386d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/587a4f9d34224f0ca0db799c638c3257.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/cc007116dd4f4c8cac6edc09adf08501.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/76f6f6abcb4444c6a7dbecd364a68b3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdW1pYW9jbg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/7ff5f30ad50f41c087880f05713c5342.png