5.x hooks or - Discussion #1119

1uokun · 2020-12-29T04:27:46Z

版本更新说明

由于这个库变成了个人开发者维护了，所以更多的版本更新是来自于issue的反馈，这里也提一下对于issue的提交规范对我们很重要。
我们将从issues中整理出一些高频问题进行在线讨论

其中问的比较炸眼👀的问题 《这个项目还维护吗》链接，我们的一致回答是 “这次一定，这次一定维护” 😂

开发说明

“站在巨人的肩膀上”

我们严格遵循ant-design的设计语言，所以非常适合在移动端上的中台类应用服务

过多的props会导致组件“千疮百孔”，间接导致我们疲于开发和维护，
样式上我们只开放styles合集对象。想改样式，这可能需要去读源码，
比如找到对应的styles name(类似html的class类名)并定义额外样式，内部代码会实现自动merge

比如：

// 使用端
<Tag
  small
  styles={{
    normalText: { color: '#52c41a' },
    normalWrap: { borderColor: '#b7eb8f', backgroundColor: '#f6ffed' },
  }}
  style={{ marginRight: 5 }}>
  NICE
</Tag>

// style name映射列表（./components/tag/style/index.tsx）
export interface TagStyle {
  tag: ViewStyle
  wrap: ViewStyle
  wrapSmall: ViewStyle
  text: TextStyle
  textSmall: TextStyle
  normalWrap: ViewStyle // 上述代码将丰富它的样式
  normalText: TextStyle // 上述代码将丰富它的样式
  activeWrap: ViewStyle
  activeText: TextStyle
  disabledWrap: ViewStyle
  disabledText: TextStyle
  close: ViewStyle
  closeIOS: ViewStyle
  closeAndroid: ViewStyle
  closeText: TextStyle
}

如果你发现这样的样式改动特别多，要么说服UI，要么这个库可能不适合你，我们希望做到“开箱即用”的初衷

把ant-desgin的sketch插件推荐给产品和UI，能节省不少工作量
幸运的是还是有很多组件是通用型的，比如List、Toast、Modal等等

React Hook

截止今天许多组件中使用了UNSAFE_xx的生命周期，避免未来react实现异步渲染时可能会造成影响，我们也将在本次重构中弃用并使用Hooks替换之。具体如下：

提供相关组件的Hooks版本
支持严格模式<React.StrictMode>
拥抱 React 17 （wow！~）

最后

欢迎大家在这里分享一下你们的使用案例，给我们一点创作灵感
有兴趣的话还可以做一个开箱即用的-pro案例

General
- Bug fixes
- Perfect Documentation
  ...
Refactoring
- Upgrade related Component to Hooks version
- Improve documentation
  ...

The text was updated successfully, but these errors were encountered:

BANG88 · 2020-12-30T03:55:07Z

What kind of react-native ui library do you expect, or what kind of ui do you think is more suitable, feel free to leave your comments to help us in the next development as much as possible to fit the actual needs.

Do you mind using Native Component?
Do you care about performance or appearance?
...?

你期望一个怎样的 react-native ui library？或者说你觉得什么样的ui才是比较适用的，欢迎留下宝贵意见以帮助我们在接下来的开发中尽可能的贴合实际需求。

你介意使用Native Component吗？

你在意的是性能还是外观？

… ?

BANG88 · 2021-01-11T09:27:28Z

那个是旧的，很久之前的了。

自定义 RN 主题和单个组件样式比如 #1853

spencer741 · 2021-04-23T05:02:58Z

I have used antd (react.js) for some time now. It is great because it includes basic components, but also professional looking components that have more applicability to complex UI needs (usually enterprise-level stuff).

ant-design-mobile-rn has the ability to build a great community, matching as many components from antd component framework as possible, and become a very popular react-native library.

Once we get past the React 17 hurdle and standardize things, we can embark on a research project to determine what antd components to reimplement for native and go from there.

Thoughts on the docs:
I completely agree with @1uokun. You have to read a lot of the source code to understand them.
The other problem I see is that the embedded emulators don't support ios or android. This is a long-standing problem for mobile component framework demos. Most react-native docs just show a gif of component interaction, which could be done here if there are no other solutions. With the standard antd component library, demos are fairly easy since it's made specifically for web. If anybody knows how to implement ios/android in-browser demos for the docs, it would be nice... but the memory overhead would be crazy. My vote is to develop a standard format for gifs (to demo components) and then include the source code in collapsable bins like the main antd website does.

@BANG88 I am more than willing to start overhauling the docs, we just need to have more discussion.

1uokun · 2021-07-07T10:10:02Z

spencer741 · 2021-07-07T18:16:05Z

@1uokun Great insight! I 100% agree with your status quo analysis.

Below, I will reference component libraries.

ant-design
ant-design-mobile
ant-design-mobile-rn

A possible plan

Stage 1

My vision for stage 1: I think that both component libraries are relevant. I agree that we should focus on replicating 100% of the ant-design React UI library for ant-design-mobile first. This will give us the opportunity to get designs of all the components hammered out for a browser-rendered mobile-centric scenes.

Create a Github project board.
1a) Compile a list of all ant-design components and their APIs.
1b) Compile a list of all ant-design-mobile components and their APIs.
1c) Develop per-component checklists in the Github project that show how many APIs are finished up to the ant-design spec.
1d) For APIs that are not necessary, but a note beside it. Discussion can happen when we get to it.
Re-organize ant-design-mobile repo to reflect stubs for the new positioning.
Start from the top of the list and work our way down, implementing each ant-design component (and each relevant API) for ant-design-mobile.

Stage 2 (optional)

Once we are done with Stage 1, I don't see why ant-design-mobile can't merge with ant-design.

To take the ant-design calendar, for example... once merged, we could provide props for controlled or uncontrolled rendering of the mapped ant-design-mobile component. This would be very nice.

import { useState } from 'react';

import { Calendar } from 'antd';

function onPanelChange(value, mode) {
  console.log(value.format('YYYY-MM-DD'), mode);
}

function Test(props)
{
   const [isMobile, setIsMobile] = useState();

   const resize = () => {
      if (window.innerWidth < 375) {
        setIsMobile(true);
      } else {
        setIsMobile(false);
      }
    };

    useEffect(() => {
        resize();
        window.addEventListener("resize", resize);
      }, [isMobile]);

    return (
        <Calendar 
                onPanelChange={onPanelChange}
                optimizedMobileView={isMobile}
                autoChangeToMobile={false}
         />
    );
}

Stage 3

Do the same process for ant-design-mobile-rn, replicating ant-design for react-native.

Getting Started

@1uokun I can create and manage the project board and other project management and maintain 100% of the documentation, helping out with components when I can. Those rough styles you have are a great start.

Ready to get to work re-igniting the ant-design-mobile community.

BANG88 · 2021-07-08T01:06:23Z

But I think ant-design-mobile is dead.

spencer741 · 2021-07-08T01:41:18Z

Yeah, I mean, we could just go full fledged into developing 1:1 components from ant-design to ant-design-mobile-rn

There is really a need for ant design level enterprise components in the react native world.

@1uokun I personally have never had a use case for ant-design-mobile , so I can't speak to how popular it is or anything.

I'm for either road as long as ant-design-mobile-rn gets supported in the end, I think that's where most people would use it. Doesn't seem like there is a huge demand for mobile web components, but I could be wrong.

1uokun · 2021-07-08T02:11:25Z

But I think ant-design-mobile is dead.

死就死了，至少ant-design-mobile-rn还有一丝活力，只要我们还在，利用&-rn+react-native-web组合盘活antd在移动端的荣光
@spencer741 High five✋, let's do it

spencer741 · 2021-07-08T05:56:08Z

@1uokun Are you saying to discontinue antd-design-mobile and put our efforts into revitalizing ant-design-mobile-rn while also making ant-design-mobile-rn compatible over react-native-web?

Just making sure I understand correctly... Chinese -> English translation can be difficult sometimes.

1uokun · 2021-07-08T06:28:54Z

@1uokun Are you saying to discontinue antd-design-mobile and put our efforts into revitalizing ant-design-mobile-rn while also making ant-design-mobile-rn compatible over react-native-web?

Just making sure I understand correctly... Chinese -> English translation can be difficult sometimes.

Your understanding is right👍
Make ant-design-mobile-rn more and more like ant-design(advantage & vision)，
ant-design-mobile is not in the discussion of this issue and ignore it.

spencer741 · 2021-07-08T07:05:54Z

@1uokun

Awesome! 😎

Give me a couple of days. I will work out a project plan. What's the easiest way for us to communicate?

1uokun · 2021-07-08T09:16:27Z

@spencer741

email: [email protected]
wechat: lk10037
or just github

spencer741 · 2021-07-09T21:35:25Z

@1uokun I have had a busy end of the week. Will get to you tomorrow about the project plan. 🙌

LZXYF · 2021-08-11T10:46:39Z

Thank you for sharing, it has brought me a lot of convenience and will always support you.

1uokun added Discussion PR welcome labels Dec 29, 2020

1uokun added this to the Community milestone Dec 29, 2020

1uokun pinned this issue Dec 29, 2020

BANG88 changed the title ~~重构计划(The new plan)4.x hooks - Discussion~~ 5.x hooks or - Discussion Dec 30, 2020

This comment has been minimized.

Sign in to view

spencer741 mentioned this issue Jul 11, 2021

Tracking ant-design-mobile-rn 5.0 #1187

Open

1uokun mentioned this issue Sep 1, 2021

SearchBar的wrapper的背景色无法修改 #1194

Closed

1 task

1uokun unpinned this issue Mar 2, 2022

1uokun closed this as completed Mar 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

5.x hooks or - Discussion #1119

5.x hooks or - Discussion #1119

1uokun commented Dec 29, 2020 •

edited

Loading

BANG88 commented Dec 30, 2020

This comment has been minimized.

This comment has been minimized.

BANG88 commented Jan 11, 2021

spencer741 commented Apr 23, 2021

1uokun commented Jul 7, 2021

spencer741 commented Jul 7, 2021

BANG88 commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 9, 2021

LZXYF commented Aug 11, 2021

5.x hooks or - Discussion #1119

5.x hooks or - Discussion #1119

Comments

1uokun commented Dec 29, 2020 • edited Loading

版本更新说明

开发说明

React Hook

最后

BANG88 commented Dec 30, 2020

This comment has been minimized.

This comment has been minimized.

BANG88 commented Jan 11, 2021

spencer741 commented Apr 23, 2021

1uokun commented Jul 7, 2021

个人愿景

Future

spencer741 commented Jul 7, 2021

A possible plan

Stage 1

Stage 2 (optional)

Stage 3

Getting Started

BANG88 commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 8, 2021

1uokun commented Jul 8, 2021

spencer741 commented Jul 9, 2021

LZXYF commented Aug 11, 2021

1uokun commented Dec 29, 2020 •

edited

Loading