山维空间

分类： 移动应用

  • 2024 中国大陆搭建 React Native 开发环境

    2024 中国大陆搭建 React Native 开发环境

    我从 Web 前端做起，后来发展到全栈，至今十几年。我觉得大陆的网络环境对 Web 开发还算比较友好，除去 Google 之外，大部分网站都能轻易访问，大部分网络产品都能自由使用。比如 GitHub，NPM，直接访问都没什么问题。只有少数几个软件包比较麻烦，也多半跟 Google 有关，比如关联到 chromium 的 Electron、Puppeteer 等。

    上周开始准备做 React Native 开发，真的踩了不少坑，感觉大陆网络对移动开发相当不友好……Vincent 问我：搭环境需要这么久么？问一下 GPT 不是一两个小时就搞定了？我微笑着告诉他，他把这件事情想简单了。于是他也的确花了一天时间才把 demo 跑起来。这里我就分享一下最新的知识吧。

    Expo

    Expor 之于 React Native，就像 Next.js 之于 React。它是一个上层的框架，提供很多常用的组件和工具函数。比如基于文件目录结构的路由管理系统，以及从之衍生出的全局 URL、页面间跳转功能等。还有一些页面组件，比如 Stack 等。

    我建议使用 Expo，我相信能给我们节省很多自己码代码的时间。学别人规划好的框架，很多时候比自己慢慢手搓要快很多。

    不需要 Expo Go

    Expo 的网站会推荐我们安装 Expo Go 作为开发调试工具。不过实测之后我发现，App Store 的 iOS 版本无法手动输入 URL，而且我们构建项目的时候，就会包含 Expo Go 的功能，所以这个东西在不需要 EAS（即 Expo 提供的云编译服务）时完全没用，可以不用考虑。

    iOS

    Ruby & Gem

    使用 React Native 需要用到 CocosPods，这是基于 Ruby 写的一些东西，所以必须通过 Gem 下载。国内访问 Gem 源非常的慢，几乎不可用。

    不过解决方案很简单，换国内镜像即可。

    升级 Xcode 及 SDK

    虽然可能不开发原生应用，但我相信所有开发者 macOS 上都有安装 Xcode。第一次安装 Xcode 的时候，可能会随手装一些 SDK 并创建虚拟机，那么当你准备尝试 React Native 开发，配置开发环境的时候，旧的 SDK 和虚拟机就可能带来问题。

    解决方案也不复杂：删掉旧的虚拟机，安装新版本 SDK，即可。

    项目目录不能有空格

    2024 年了，居然还有这种问题……总之吧，从根目录算起，一直到我们的 React Native 项目目录，目录名都不能有空格。我建议尽量只使用英文字母和数字作为目录名，几乎不会遇到问题。

    Android

    Android 所需的网络环境之恶劣超出我的想象。可能跟它比较依赖 Google 服务有关，大量服务要么完全无法访问，要么速度非常慢。而且跟梯子没什么关系，很多东西可以直连下载，但就是慢的无法使用。

    不要使用太新的 SDK

    比如以目前这个时间点，Android 35 和 NDK 27 都不行，最高只可以用 Android 34 + NDK 26。我甚至建议大家用旧一些的，反正我们搞 React Native，没必要追新。

    手动处理 gradle-{VERSION}-all.zip

    我的 Android 环境 第一关卡在下载 gradle-N-N-all.zip 上。其实我本地网络直连下载也没问题，但就是太慢。200+MB 的包每次都超时。解决方案是先手动下载，慢慢下不着急，普通网络也几乎不会失败。

    然后把文件放到 android/gradle/wrapper/ 目录下面。接着修改 android/gradle/wrapper/gradle-wrapper.properties 文件，把其中 distributionUrl 指向对应的相对路径，即可。

    再次执行 expo run:android，就从本地处理，速度飞快。

    手动处理
    react-android-{VERSION}-debug.aar

    第二个卡住我的是 react-android-0.74.5-debug.aar，问题表现跟上面的 gradle 一样，不是不能下载，就是慢。以至于我抱着试一试的想法坚持了两天……

    最终找到解决方案，手动下载文件，然后找到本地目录 $HOME/.gradle/caches/modules-2/files-2.1/com.facebook.react/react-android ，在里面找到对应的版本号，然后在里面可以看到几个目录，找到里面有 .pom 文件的目录，把刚才下载好的文件放进去，即可。

    其它文件

    其它文件下载也需要很久，但是不至于因为超时失败，我就不多说了，耐心等待即可。我也试过换源，但是不知为何，都不成功，可能跟 React Native 有关？国内镜像源都只针对了一般 Android 仓库？

    总结

    希望以后网络环境会愈来越好。希望这篇博客里的经验对大家有用。

    以后要好好钻研 React Native 开发了，相信会有更多的内容分享给大家。敬请期待吧。如果各位读者有什么想看的，也不妨留言告诉我。

  • Android Hybrid App四大坑

    Android Hybrid App四大坑

    首先解释下题目，Hybrid App，混合应用，代表平台Phonegap，一般指使用原生包装Web页面开发的应用。与原生应用相比，主要用户界面和业务逻辑都是用Web技术也就是HTML+CSS+Javascript实现的；与Web应用相比，Web部分打包在应用内部，使用时不需要网络。

    顺便说一句，很多解决方案其实不算Hybrid，比如Adobe AIR、Titanium、Mono，这些都是使用某一特定技术开发跨平台应用的工具，最终产品都是编译成原生来跑的。

    我们没有选择phoengap为技术基础（我对此并不满意，我认为以phonegap为基础可以少走一些弯路，少花一些精力，还能产出很多有价值的副产品），而是自行开发原生框架，主要目标平台是Android——嗯，就是那个从系统版本到模块组合都巨分散的Android，可以这么说，坎坷从立项的那一刻起就已经注定了……接下来，便请听我一一讲述：Android Hybrid App四大坑。（此文主要针对Android 4.3-的webview，部分浏览器比如Chrome已经改善了具体实现，所以Web App其实环境不错。）

    游戏泡泡v0.2首页截图
    游戏泡泡v0.2首页截图

    前端代码开源就好，https://github.com/Dianjoy/gamepop，要跑起来需要修改config.js，把if (debug) {}的内容删掉。

    （更多…）

  • 文章预告：移动 Web 开发四大坑

    虽然明知道没什么人看，不过也先放个预告吧，其实是怕自己到时候忘记了。

    《移动开发四大坑》，分享这次移动泡泡开发过程中踩到的坑和解决方案：

    1. 缺少标准 flexbox，没法自动换行，导致列表排版出问题
    2. tap 和 click 之间的 300ms 引来的各种问题
    3. position:relative 也可能是罪魁祸首
    4. 很多 JS API 都不是默认开启的，得用原生实现

  • 的pathname在不同浏览器中表现不同

    <a href="download://gamename/游戏名称">Download</a>

    在桌面版Chrome 32里，这样的<a>，其pathname会被解析成“//gamename/游戏名称”。

    在Android 4.2的WebView里，会被解析成“/游戏名称”。

  • Android笔记

    这篇文章会记录我在Android开发过程中积累的各种知识和技巧。
    （更多…）