Code Monkey home page Code Monkey logo

stationchnqoo / react-native-miui Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 204 KB

React Native 通用组件库,参照 MIUI 7 的设计效果,致力于给用户更好的体验。只要时间允许我会每周 Pulish 一个组件。争取以后 UI 组件库直接用 MIUI 全家桶就可以了。

TypeScript 46.43% JavaScript 53.57%
react-native miui harmonyos ant-design material-design material-ui react-native-button react-native-waterfall react-native-staggered-list react-native-elements react-native-masonry android react

react-native-miui's Introduction

react-native-miui

React Native 通用组件库,参照 MIUI 7 的设计效果,致力于给用户更好的体验。只要时间允许我会每周 Pulish 一个组件。争取以后 UI 组件库直接用 MIUI 全家桶就可以了。

PS: 在 2022年3月13号 的凌晨 12点,创建了 raect-native-miui 仓库,并且提交了第一个组件 ColorfulButton。 从此走上了造轮子之路。

😍 组件特色

设计**

  • 2202年 了,现在我还有一台 MI 2s 没舍得扔,毕竟当年的 MIUI 7 的设计至今应该还没有被超越。所以这个组件库大部分组件的设计**就是 MIUI 7,组件的反馈效果也是参考的 MIUI 7

  • 目前我的手机里面装了好几百个 APP,没事儿的时候,我就随机点几个 APP,挨个页面看页面怎么设计的、组件怎么设计的,找一些灵感。只要感觉有 花🌹里🍐胡🐯哨🔥 的组件,就撸一个出来。然后 Publish

配色方案

MIUI 7 设计的基础上,参照 Material Design 配色。

动画效果

尽可能的使用 原生驱动 动画效果,给用户平滑的体验,每一个组件的动画都经历了 N 次动画参数的调整。

可扩展性

既可以尽可能的少用参数就能体验到组件的 基础功能,又提供了丰富的扩展参数。

😌 命名规范

因为用的是 react-nativeJS 原始组件实现,所以命名规则尽可能参照原始 Component 原有的属性或者回调函数。

🤔 如何使用

Please visit doc.cctv3.net。

😡 已知问题

TypeScript 的支持

Using "useImperativeHandle" in a React functional component, with automatic TypeScript typing.

如果组件通过 ref 访问不到属性的时候,报错:

Property 'xxx' does not exist on type 'never'.

请在项目根目录添加 tsconfig.json

{
  "compilerOptions": {
    "module": "ES2015",
    "moduleResolution": "node",
    "target": "esnext",
    "lib": ["es5", "es6", "ESNext", "dom"],
    "jsx": "react",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "alwaysStrict": true
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.