新建react native 项目

react-native init AwesomeProject 新建AwesomeProject文件

cd AwesomeProject 进入项目

react-native run-android　　测试运行

react-native项目引用create-react-native-app

1、yarn add antd-mobile

2、yarn add babel-plugin-import

3、在你的项目目录下找到.babelrc 文件修改成如下：

{ "plugins": [["import", { "libraryName": "antd-mobile" }]], "presets": ["react-native"] }

   使 用

import React, { Component } from 'react';
import {View}from 'react-native'
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';

export default class App extends Component<{}> {
  render() {
    return (
      <View>
        <WingBlank>
          <Button>default</Button><WhiteSpace />
          <Button disabled>default disabled</Button><WhiteSpace />

          <Button type="primary">primary</Button><WhiteSpace />
          <Button type="primary" disabled>primary disabled</Button><WhiteSpace />

          <Button type="warning">warning</Button><WhiteSpace />
          <Button type="warning" disabled>warning disabled</Button><WhiteSpace />

          <Button loading>loading button</Button><WhiteSpace />
          <Button icon="check-circle-o">with icon</Button><WhiteSpace />
          <Button icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/jBfVSpDwPbitsABtDDlB.svg" alt="" />}>with custom icon</Button><WhiteSpace />

            {/* <Button activeStyle={false}>无点击反馈</Button><WhiteSpace /> */}
            {/* <Button activeStyle={{ backgroundColor: 'red' }}>custom feedback style</Button><WhiteSpace /> */}

          <WhiteSpace />
          <Button type="primary" inline style={{ marginRight: 4}}>inline primary</Button>
            {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
          <Button type="ghost" inline style={{ marginRight:4 }} className="am-button-borderfix">inline ghost</Button>

          <WhiteSpace />
          <Button type="primary" inline size="small" style={{ marginRight: 4 }}>primary</Button>
          <Button type="primary" inline size="small" disabled>primary disabled</Button>
          <WhiteSpace />
          <Button type="ghost" inline size="small" style={{ marginRight: 4 }}>ghost</Button>
            {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
          <Button type="ghost" inline size="small" className="am-button-borderfix" disabled>ghost disabled</Button>
        </WingBlank>
      </View>
    );
  }
}