第一步： 安装

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

or

yarn add @ant-design/react-native

第二步： 安装字体图标

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

or

yarn add @ant-design/icons-react-native

第三步: 链接字体图标

react-native link @ant-design/icons-react-native

第四步: 使用

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-import] 试试~

• 手动引入

  import Button from '@ant-design/react-native/lib/button';