npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

r-design

v1.0.5

Published

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

Downloads

15

Readme

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

参考链接