R-Design
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