How to use antd-mobile-rn with create-react-native-app

Install and Initialization

$ npm install -g create-react-native-app

# Note: The tool will create and initialize environment and dependencies automaticly, please try config your proxy setting or use other npm registry if any network errors happen during it.
$ create-react-native-app my-app

$ cd my-app
$ npm start

You can also run npm run ios / npm run android in terminal to access the application in the MacOS or PC simulator.

Import antd-mobile-rn

First we install antd-mobile-rn and babel-plugin-import(A babel plugin for importing components on demand principle) from yarn or npm.

$ npm install antd-mobile-rn --save
$ npm install babel-plugin-import --save-dev

1. Modify the .babelrc config, then restart the service.

   {
     "presets": ["babel-preset-expo"],
     "plugins": [["import", { "libraryName": "antd-mobile-rn" }]],
     "env": {
       ...
     }
   }

2. Modify the App.js file, import Button component from antd-mobile-rn.

...
import { Button } from 'antd-mobile-rn';

...
render() {
  return (
    ...
    <Button>antd-mobile-rn button</Button>
    ...
  );
}