Ant Design Mobile RN 安装配置全攻略：新手入门篇

最新推荐文章于 2024-11-05 18:24:52 发布

谢敏栋

最新推荐文章于 2024-11-05 18:24:52 发布

阅读量943

点赞数 24

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01204/article/details/143043374

Ant Design Mobile RN 安装配置全攻略：新手入门篇

ant-design-mobile-rn Ant Design for React Native 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-mobile-rn

一、项目基础介绍及编程语言

Ant Design Mobile RN 是基于 Ant Design 移动端规范实现的一个高可配置的React Native UI库。此项目允许开发者在移动应用开发中快速构建一致且美观的界面。它支持Web与原生环境，并采用TypeScript进行开发，确保了类型安全与代码质量。对于追求设计统一性和效率的团队，它是理想选择。

二、关键技术与框架

React Native: 提供跨平台的UI开发能力。
Ant Design Mobile: 设计体系，提供丰富组件和一致的设计风格。
TypeScript: 强类型的JavaScript超集，增强代码可维护性。
Expo: 对于快速原型开发和简单的应用，提供了开箱即用的工具链。
React Native Gesture Handler 和 React Native Reanimated: 提供动画和手势处理功能。

三、安装与配置详细步骤

准备工作

确保环境：你需要安装Node.js（推荐最新稳定版），以及npm或yarn包管理器。
安装React Native CLI（可选）：如果你不使用Expo，需要安装React Native CLI。
安装Expo客户端（如果选择使用Expo预览）：在iOS或Android设备上下载并安装Expo App。

安装步骤

对于 Expo 项目：

克隆项目：

git clone https://github.com/ant-design/ant-design-mobile-rn.git

切换到example目录：
```
cd ant-design-mobile-rn/example
```
安装依赖：
```
yarn 或者 npm install
```
启动Expo项目：
```
yarn expo 或者 npx expo start
```
扫描二维码即可在手机上查看应用。

对于非Expo（裸）React Native项目：

完成上述的克隆和进入example目录步骤后。

安装Ant Design Mobile RN及其图标库：

npm install @ant-design/react-native @ant-design/icons-react-native

安装必要的依赖：
```
npm install react-native-gesture-handler react-native-reanimated cocoapods（仅iOS）
```
对于iOS，确保安装CocoaPods，然后在iOS目录下运行pod install。
配置图标字体（如果需要）：在react-native.config.js中添加资产路径，如果文件不存在则创建。
```
module.exports = {
  assets: ['./node_modules/@ant-design/icons-react-native/fonts'],
};
```
运行npx react-native-asset自动链接资源。
启动项目：对应地执行npm run ios或npm run android命令以在模拟器或连接的设备上启动应用。