/R-Design

基于 react native 和 Ant Design Mobile 的移动端UI组件设计库

Primary LanguageJavaScriptMIT LicenseMIT

R-Design

npm package R-Design 是基于react native 和 antd-mobile的移动端RN UI Widget。

特性

  • 基于 React Native 的多平台支持。
  • 自由的视觉样式配置，适应各类产品风格。
  • 提供类型定义文件index.d.ts,一看便知如何使用,方便自动提示。

为什么使用它

  • 在这里首先十分感谢蚂蚁金服ant design mobile团队开发的UI Widget，可以说十分方便了，但是使用过程中还是有不少问题，例如部分组件修改样式不方便或者说组件的部分样式无法修改，输入框在RN环境下使用时clear按钮无法显示,inputItem,Switch必须在List下工作等等问题，其他问题可以看官方issue,总体来说ant design mobile服务于蚂蚁及口碑无线业务更加合适。
  • RN官方提供的checkbox组件不知道在哪里。
  • RN官方提供的FlatList的onEndReached方法会触发两次，以及当网络中断或者没有数据需要显示ListEmptyComponent默认插画时高度无法撑满等等情况。
  • RN官方以及Ant Design Mobile组件对于Switch等高度依赖于平台特性，例如我希望Android端就想显示IOS的效果不容易实现等等。
  • RN官方实现Button需要复合组件封装等等。

设计原则

  • 组件尽量屏蔽及解决各种issue,调用者无需关注。
  • 样式基于默认规则的同时又支持高度定制化完成个性化需求。
  • 完全基于属性配置。

特别说明

  • DrawerLayout,TabBar,TabLayout请直接使用react-navigation中的DrawerNavigator和TabNavigator。R-Design里的RTabBarItem可以完美契合这两组件。
  • react-navigation 或者参考作者的Demo

配置要求

node@4+
npm@3+

使用说明

  • react-native init RDesignDemo.
  • yarn add r-design 或者 npm install --save r-design
  • yarn add babel-plugin-import --dev 或者 npm install --save-dev babel-plugin-import
  • 编辑.babelrc 如下： { "presets": ["react-native"], "plugins": [ ["import", { "libraryName": "antd-mobile" }] ] } 具体使用参考Demo

参考链接