程序员的 Mac 开发环境
Xcode Command Line Tools1$ xcode-select --install Homebrew访问 brew.sh 安装。使用 Homebrew 安装 Apple（或您的 Linux 系统）没有预装但 你需要的东西。Homebrew 将大大降低维护环境的时间。本文后面将尽可能使用 Homebrew。 网络问题请参考 解决homebrew安装curl: (7) Failed to connect to http://raw.githubusercontent.com port 443错误 解决。 brew install：安装 brew uninstall：卸载 brew update：更新 homebrew brew upgrade：更新已安装软件 brew cleanup：清理 brew update && brew upgrade && brew cleanup：一键清理 卸载脚本： 1/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/H ...
antd 快速上手
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 文章可参考源码：antd-with-ts-demo Ant Design 设计体系以笔者的经验来看，Ant Design 设计体系下的产品设计理念、使用方式、底层技术、周边工具都保持着高度一致，工具不是越多越好，有一套好用顺手的就行，UI框架千千万，你不可能都学一遍。Ant Design 无疑能够减少你的学习成本。 设计 设计价值观 全局样式 设计模式 组件库 Ant Design of React: 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 Ant Design Mobile of React: antd-mobile 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。 Ant Design Mobile RN of React: @ant-design/react-native 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。 Ant De ...
Nest.js 快速上手
Nest.js 是什么？ Nest 是一个用于构建高效，可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript，内置并完全支持 TypeScript（但仍然允许开发人员使用纯 JavaScript 编写代码）并结合了 OOP（面向对象编程），FP（函数式编程）和 FRP（函数式响应编程）的元素。 在底层，Nest使用强大的 HTTP Server 框架，如 Express（默认）和 Fastify。Nest 在这些框架之上提供了一定程度的抽象，同时也将其 API 直接暴露给开发人员。这样可以轻松使用每个平台的无数第三方模块。 Nest.js 解决了什么问题？ 近年来，感谢 Node.js，JavaScript 已成为前端和后端应用程序的网络“通用语言”。这产生了令人敬畏的项目，如 Angular，React 和 Vue，它们提高了开发人员的工作效率，并能够构建快速，可测试和可扩展的前端应用程序。然而，虽然 Node（和服务器端 JavaScript ）存在大量优秀的库，帮助器和工具，但它们都没有有效地解决主要问题 - 架构。 Nest 提供了一 ...
玩转 React Native 自定义字体
下载免费商用字体 法棍体：链接:https://pan.baidu.com/s/1M-CDEqsJ06qj-42uRyF0WA 密码:83er 使用 FontLab 查看字体的 fontFamily FontLab 破解版 Mac： 链接:https://pan.baidu.com/s/1Wb3xgB9mJqF4YGX0xXddMg 密码:1cfb 将字体放到放在项目根目录： 在根目录新建 react-naitve.config.js: 1234567module.exports = { project: { ios: {}, android: {}, }, assets: ['./fonts'],} 在根目录执行 react-native link 命令 使用字体： 123456789101112// 全局const TextRender = Text.renderText.render = (...args) => { c ...
React Native 集成 CodePush 指南
目前现存的热更新方案有腾讯的 Bugly 应用升级、React Native 中文网的 Pushy、微软的 CodePush 和用来搭建私服的 code-push-server。 本文分享的是基于微软 AppCenter 的 CodePush 服务实现热更新，这个比较有代表性，也方便各位读者大大实践。当然鉴于国内的网络环境，后期会发布一篇如何基于 code-push-server 实现热更新功能。 环境 Xcode：Version 11.3.1 (11C504) react-native：0.61.5 react-native-code-push: 6.1.0 appcenter-cli：2.3.3 CodePush介绍CodePush 是一个 App Center 云服务，使 Apache Cordova 和 React Native 开发人员可以将移动应用程序更新直接部署到其用户的设备上。它充当中央存储库的角色，开发人员可以将某些更新（例如JS，HTML，CSS和图像更改）发布到该存储库，并且应用程序可以（使用提供的客户端SDK）从中查询更新。这使你可以与最终用户建立更具确定性 ...
利用 Metro 配置 React Native 端口
当我们执行 react-native start 命令时，React Native 会启动一个默认端口号为 8081的本地服务，该 8081 的服务就是React Native项目的一个本地 Node 服务器，用于提供 JSBundle 包和一些静态资源。这一切都是 React Native 帮开发者配置好的，一切都是那么简便。 本文旨在告诉大家现在我们只需要简单地对 Metro 进行配置即可修改默认的版本号。 我翻阅了一下网上的方案，都太麻烦了，想着这功能官方不该提供可配置的吗？于是翻阅了官方的脚手架工具@react-native-community/cli。打开loadMetroConfig.ts 文件我找到了以下代码： 123server: { port: Number(process.env.RCT_METRO_PORT) || 8081,}, 当我看到 RCT_METRO_PORT 这个属性，顿感这玩意和项目根目录的 metro.config.js 有关系。于是照猫画虎，在这个文件中添加了一下配置： 123456module.exports ...
React Native 架构面面观
@sigmayun/react-native-template-typescript@sigmayun/react-native-template-typescript是基于 react-native-community/react-native-template-typescript 二次开发的模板脚手架。本文的架构方案融进了该模板。你甚至不需要阅读本文的内容即可使用本文中的最佳实践！！！ 全局变量既然都引入 TypeScript 了，就不用再担心给全局对象添加属性不小心污染它了，但是需要我们进行一些配置。 1、在项目根目录新建 types,并新建 global.d.ts 文件名，添加一下内容： 1234declare const global: { HermesInternal: null | {} ...} 2、为了防止和 @types/node 的 Global 声明冲突，需要把 tsconfig.json 中的 skipLibCheck 的值设置为 true 该部分示例代码涉及 global.ts、 ...
配置 react native splash screen 防止启动白屏
如果你有设计师，请让设计师给你要的所有尺寸图，如果没有请自行使用 图标工厂 一键生成所有尺寸的图标/启动图。 安装依赖$ yarn add react-native-splash-screen Android1、通过创建 launch_screen.png 文件并把它们放到 mipmap- 文件夹下来自定义你的启动图。安卓会自动选择合适的分辨率，因此你不是必须为所有手机分辨率提供图片。不过，你可以为以下所有分辨率提供启动图： mipmap-mdpi mipmap-hdpi mipmap-xhdpi mipmap-xxhdpi mipmap-xxxhdpi 2、更新你的 MainActivity.java 文件如下： 1234567891011import android.os.Bundle;import org.devio.rn.splashscreen.SplashScreen;public class MainActivity extends ReactActivity { @Override protected void onCreate(Bund ...
React Native 配置字体大小不随字体设置变化
添加以下代码到 index.js: 123import { AppRegistry, Text, TextInput } from 'react-native'Text.defaultProps = { ...Text.defaultProps, allowFontScaling: false }TextInput.defaultProps = { ...TextInput.defaultProps, allowFontScaling: false }
React Native 安卓必知必会
配置应用名很简单,我们直接打开 android/app/src/main/res/values/strings.xml，即可看到配置中的 app_name，修改为你想要的即可。 配置图标也很简单，在 android\app\src\main\res\mipmap-xxxxxx 中直接覆盖图标就可以，注意图标的大小。 打包 APK1、在项目根目录执行 keytool -genkeypair -v -keystore release.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 生成密钥文件 release.keystore 2、把 release.keystore 文件放到你工程中的 android/app 文件夹下。 3、配置 android/app/build.gradle 12345678910111213141516171819android{ ... signingConfigs { release { s ...
