Skip to content

Latest commit

 

History

History
129 lines (90 loc) · 4.68 KB

README.zh-CN.md

File metadata and controls

129 lines (90 loc) · 4.68 KB

English | 简体中文

Ant Design Mobile RN

Codecov npm package NPM downloads Dependency Status Percentage of issues still open Join the chat at https://gitter.im/ant-design/ant-design

Ant Design 移动端设计规范。@ant-design/react-native 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。

特性

  • 基于 Ant Design 移动设计规范。
  • 规则化的视觉样式配置,适应各类产品风格。
  • 基于 React Native 的多平台支持。
  • 使用 TypeScript 开发,提供类型定义文件。

Expo

HTML5 预览: ant-design-mobile-rn/index.html

SDK 49+
expo/ant-design-mobile-rn

提示:使用本地原相机扫瞄上面的二维码, 需要下载 Expo App: https://expo.io/tools

Expo SDK历史版本
Expo SDK 44 SDK 47 iOS SDK 47 Android
expo/ant-design-mobile-rn expo/ant-design-mobile-rn expo/ant-design-mobile-rn

安装 & 使用

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

or

yarn add @ant-design/react-native

安装peer依赖

npm install @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler

or

yarn add @react-native-community/segmented-control @react-native-community/slider @ant-design/icons-react-native react-native-gesture-handler

安装完依赖后需要到 iOS 目录 pod install(auto linking),Android 不需要手动处理

链接字体图标

// 配置根目录下的 `react-native.config.js` 文件
module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};

然后

# 手动执行命令
npx react-native-asset

链接

本地演示

  • 使用 expo-cli 运行
# go to expo example folder
cd example

# install dependencies
yarn

# start expo
yarn expo
  • 使用 react-native-cli 运行
# clone
git clone [email protected]:ant-design/ant-design-mobile-rn.git

# go to ant rn folder
cd ant-design-mobile-rn

# install dependencies
yarn

# start ios
cd rn-kitchen-sink/ios && pod install
yarn ios

# start android
yarn android

欢迎贡献

有任何建议或意见您可以进行 提问