AntFB Mobile
A configurable Mobile UI specification and React-based implementation.
Features
- Follow AntFB Mobile UI specification.
- Configurable UI style for different products.
- Support web and native usages based on React Native.
- Develop in TypeScript.
Demo
mobile web demo
http://diy-design.me/n.html?%2F&port=8002/kitchen-sink/
react native demo
Install
$ npm install antFB-mobile --save
Usage
Web
import 'antFB-mobile/lib/button/style';import Button from 'antFB-mobile/lib/button'; ReactDOM;
Set webpack to resolve .web.js suffix
resolve: {
modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['', '.web.js', '.js', '.json'],
},
React-Native
import React Component from 'react';import AppRegistry from 'react-native';import Button from 'antFB-mobile/lib/button'; { return <Button>Start</Button>; } AppRegistry;
Use babel-plugin-antd
Use babel-plugin-antd (Recommended) to reduce bundle size.
// .babelrc// no need to set style property in react-native "plugins": "antd" "style": "css" "libraryName": "antFB-mobile"
Then you can import components from antFB-mobile directly.
// import js and css modularly, parsed by babel-plugin-antdimport Button from 'antFB-mobile';
Browser Support
iOS
Android 4.0+