Ant Design Mobile RN of React

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

+

特性和优势

  • UI 样式高度可配置,拓展性更强,轻松适应各类产品风格

  • 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile)

  • 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案,一体式开发

  • 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发

  • 全面兼容 react

适用场景

  • 适合于中大型产品应用

  • 适合于基于 react-native 的多终端应用

  • 适合不同 UI 风格的高度定制需求的应用

版本

  • 稳定版:npm package

  • 开发版:npm package

安装

首先,您需要将它们安装到您的项目中:

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

安装 peerDependencies

我们将以下依赖通过 peerDependencies 进行管理,目的是为了让您可以更灵活地选择版本,减少重复安装依赖:

  • 如果使用Expo来构建项目的,请使用 expo推荐,这能安装到最合适的版本):

    npx expo install react-native-gesture-handler react-native-reanimated
  • 如果使用React Native CLI原生构建项目的,请使用 npm

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

链接字体图标

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

    module.exports = {
      assets: ['node_modules/@ant-design/icons-react-native/fonts'],
    };
  • 然后执行 react-native-asset 的命令,字体文件将会自动复制到iosandroid 资源文件中:

    npx react-native-asset
  • 如果使用Expo来构建项目,省略上两步,直接使用 expo-font 加载字体:

    import { useFonts } from 'expo-font';
    
    const [fontsLoaded] = useFonts({
     antoutline: require('@ant-design/icons-react-native/fonts/antoutline.ttf'),
    })

示例

组件使用实例:

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from '@ant-design/react-native/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

如果需要使用Modal以及Toast还需要在 App 的入口处加上Provider

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Button, Provider, Toast } from '@ant-design/react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Provider>
        <Button onPress={() => Toast.info('This is a toast tips')}>
          Start
        </Button>
      </Provider>
    );
  }
}
按需加载

下面两种方式都可以只加载用到的组件,选择其中一种方式即可。

  • 使用 babel-plugin-import(推荐)。

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { libraryName: "@ant-design/react-native" }] // 与 Web 平台的区别是不需要设置 style
      ]
    }

    然后改变从 @ant-design/react-native 引入模块方式即可。

    import { Button } from '@ant-design/react-native';

    说明:有人反映通过 react-native init 创建的项目在使用时可能会报 Unable to resolve module react-dom 的错误 ,此时不妨安装 babel-plugin-module-resolver 试试~

  • 手动引入

    import Button from '@ant-design/react-native/lib/button';
更多增强 (非必须):

自定义 RN 主题和单个组件样式 比如 #1853

链接

如何贡献

在任何形式的参与前,请先阅读 贡献者文档。有任何建议或意见您可以 Pull Request,给我们 报告 Bug

强烈推荐阅读 《提问的智慧》《如何向开源社区提问题》《如何有效地报告 Bug》,更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时,建议加上 antd/antd-mobile-rn 标签。

  1. Stack Overflow(推荐)

  2. Segment Fault

  3. Join the chat at https://gitter.im/ant-design/ant-design


不满足业务? 需要定制,联系我,低至 $99 /天 @1uokun