Closed 1uokun closed 2 years ago
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.
你期望一个怎样的 react-native ui library?或者说你觉得什么样的ui才是比较适用的,欢迎留下宝贵意见以帮助我们在接下来的开发中尽可能的贴合实际需求。
- 你介意使用Native Component吗?
- 你在意的是性能还是外观?
- … ?
通过整理issue list,有一大部分issues是因为文档不完善一定要通过源码阅读才能知道如何使用。 我觉得一个适用的ui一定是文档清晰完整的 目前整理了有几个特别需要完善的:
styles
props with <WithTheme>
(❓是否要在文档中额外说明一下styles
或者额外介绍一下WithTheme
呢❓)
Modal
样式覆盖 #746Pagination
样式覆盖 #592Badge
样式覆盖 #661DatePicker
#741Provider
#690Perfect Documentation
通过整理issue list,有一大部分issues是因为文档不完善一定要通过源码阅读才能知道如何使用。 我觉得一个适用的ui一定是文档清晰完整的 目前整理了有几个特别需要完善的:
styles
props with<WithTheme>
(❓是否要在文档中额外说明一下styles
或者额外介绍一下WithTheme
呢❓)
Modal
样式覆盖 #746Pagination
样式覆盖 #592Badge
样式覆盖 #661- label:Style...
DatePicker
#741Provider
#690- ...
增强功能文档已存在没仔细看到😆
自定义 RN 主题和单个组件样式 比如 #1853
那个是旧的,很久之前的了。
自定义 RN 主题和单个组件样式 比如 #1853
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.
我对ant-design-mobile-rn
的理解是ant-design-mobile
的RN版本,
现状: 结合了nativebase、wix、kitten等RN组件库以及vant等移动端web库之后发现
优势:
它的优势在于继承了ant-design
设计语言
我觉得应该扩大这一优势,支持更多组件平移,让ant-designh和ant-design-mobile-rn两者轻松切换
🚩未来定位:
参考ant-design的组件库,想在未来补充一些组件库:
大致样式
@1uokun Great insight! I 100% agree with your status quo analysis.
Below, I will reference component libraries.
1) ant-design 2) ant-design-mobile 2) ant-design-mobile-rn
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.
1) 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.
2) Re-organize ant-design-mobile repo to reflect stubs for the new positioning.
3) 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
.
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}
/>
);
}
Do the same process for ant-design-mobile-rn
, replicating ant-design
for react-native.
@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.
But I think ant-design-mobile
is dead.
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.
But I think
ant-design-mobile
is dead.
死就死了,至少ant-design-mobile-rn
还有一丝活力,只要我们还在,利用&-rn
+react-native-web
组合盘活antd
在移动端的荣光
@spencer741 High five✋, let's do it
@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 Are you saying to discontinue
antd-design-mobile
and put our efforts into revitalizingant-design-mobile-rn
while also makingant-design-mobile-rn
compatible overreact-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.
@1uokun
Awesome! 😎
Give me a couple of days. I will work out a project plan. What's the easiest way for us to communicate?
@spencer741
email: luokun199503@gmail.com wechat: lk10037 or just github
@1uokun I have had a busy end of the week. Will get to you tomorrow about the project plan. 🙌
Thank you for sharing, it has brought me a lot of convenience and will always support you.
版本更新说明
由于这个库变成了个人开发者维护了,所以更多的版本更新是来自于issue的反馈,这里也提一下对于issue的提交规范对我们很重要。 我们将从issues中整理出一些高频问题进行在线讨论
其中问的比较炸眼👀的问题 《这个项目还维护吗》链接 ,我们的一致回答是 “这次一定,这次一定维护” 😂
开发说明
我们严格遵循ant-design的设计语言,所以非常适合在移动端上的中台类应用服务
过多的
props
会导致组件“千疮百孔”,间接导致我们疲于开发和维护, 样式上我们只开放styles
合集对象。想改样式,这可能需要去读源码, 比如找到对应的styles name(类似html的class类名)并定义额外样式,内部代码会实现自动merge比如:
如果你发现这样的样式改动特别多,要么说服UI,要么这个库可能不适合你,我们希望做到“开箱即用”的初衷
把ant-desgin的sketch插件推荐给产品和UI,能节省不少工作量 幸运的是还是有很多组件是通用型的,比如List、Toast、Modal等等
React Hook
截止今天许多组件中使用了
UNSAFE_xx
的生命周期,避免未来react实现异步渲染时可能会造成影响,我们也将在本次重构中弃用并使用Hooks替换之。具体如下:<React.StrictMode>
最后
欢迎大家在这里分享一下你们的使用案例,给我们一点创作灵感 有兴趣的话还可以做一个开箱即用的-pro案例
Component
toHooks
version