README.zh-CN.md

English | 简体中文

Ant Design Mobile RN

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

特性

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

Expo

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

SDK 54(react-native@0.81.5)

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

Expo SDK(47, 49, 50, 51, 52) history version

SDK 47 iOS	SDK 47 Android	SDK 49,50	SDK 51	SDK 52

安装 & 使用

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

安装peer依赖

接下来安装来自 peerDependencies 管理的依赖：

• 如果使用Expo来构建项目的，请使用 expo（推荐，这能安装到最合适的版本）：

  npx expo install react-native-gesture-handler react-native-reanimated react-native-worklets

• 如果使用 React Native CLI 原生构建项目的，请使用 npm ：

  npm install react-native-gesture-handler react-native-reanimated react-native-worklets

  你还需要手动将 react-native-worklets/plugin 插件添加到你的 babel.config.js 中：

  module.exports = {
    presets: [
      ... // 不要把它加在这里 :)
    ],
    plugins: [
      ...
      'react-native-worklets/plugin',
    ],
  };

  更多详情请参见 react-native-reanimated 安装文档

• 对于 iOS 的 React Native CLI裸项目，请确保已安装 CocoaPods。然后执行 pods (auto linking)，
  Android 不需要手动处理：

  cd ios
  pod install
  cd ..

链接字体图标

将字体资源路径配置到根目录下的 react-native.config.js 文件中 ( 如果没有，请创建 )

module.exports = {
  assets: ['node_modules/@ant-design/icons-react-native/fonts'],
};

然后执行 react-native-asset 的命令

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 git@github.com: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

欢迎贡献

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

---

感谢@ant-design/react-native的所有贡献者：