RN mobile antd`的`List`组件

最新推荐文章于 2024-07-20 21:01:09 发布
最新推荐文章于 2024-07-20 21:01:09 发布
阅读量411 收藏 10
点赞数 9
文章标签： css react.js react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y199710/article/details/135954046
版权
本文介绍了如何在RNmobileantd的List组件中，通过设置styles属性和覆盖内置的border-bottom-width样式，以及使用额外的Switch组件，来移除每个List.Item的下边框。
摘要由CSDN通过智能技术生成

`RN mobile antd`的`List`组件每个`List.Item`会自带一条下边框，`style`无法去除，解决

//使用styles覆盖
<List>
    <List.Item
        styles={{ Line: { borderBottomWidth: 0 } }}
        style={[styles.topBox]}
        extra={
            <Switch color="#42CC48" onChange={val => switchChange(val)} style={{width:58,height:30}}/>
        }>
        Voice broadcast
    </List.Item>
</List>
y199710
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
Ant Design Mobile RNAnt ...演示请先安装 expo app：安装 & 使用npm install @sishuguojixuefu/antd-mobile-rn --saveoryarn add @sishuguojixuefu/antd-mobile-rn链接字体图标react-native link @ant-design/ico
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
React 的antd-mobile 组件库，嵌套路由
城下深蓝的博客
07-20 3741
React 的antd-mobile 组件库，嵌套路由
第五篇：【传奇开心果系列】Ant Design Mobile of React移动应用开发：基础页面制作介绍和示例代码_react开发页面(1)
m0_60721860的博客
05-14 706
①　2000多本Python电子书（主流和经典的书籍应该都有了）②　Python标准库资料（最全中文版）③　项目源码（四五十个有趣且经典的练手项目及源码）④　Python基础入门、爬虫、web开发、大数据分析方面的视频（适合小白学习）⑤ Python学习路线图（告别不入流的学习）return (
React-Native antd-mobile-rn组件库集成使用
热门推荐
大灰狼的小绵羊哥哥的博客
09-06 1万+
github地址 https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app 文档地址： https://rn.mobile.ant.design/docs/react/introduce-cn 集成 1. 安装antd-mobile-rn 库npm install antd-...
react native antd-mobile-rn组件库集成使用
Devil不加V
04-02 929
github地址 https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app 文档地址： https://rn.mobile.ant.design/docs/react/introduce-cn 集成 1. 安装antd-mobile-rn 库npm install antd-...
antd mobile第二弹之报错篇
懒鬼不能懒的博客
07-07 424
打开项目后整理完基本的结构之后，就开始开发了，用着用着，发现控制台一直有个报错在显示： 自此查 了下，说是使用了旧版本的api。是src下面的index里的<React.StrictMode></React.StrictMode> 删除掉就好了~ 本来以为报错清掉了，结果浏览器好像在开玩笑一样，点击页面到时候又开始出现让人困扰的红色信息了： fastclick.js:446 [干预] Unable to preventDefault inside passive event li
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
antd-mobile-plus:基于antd-mobile @ 2的业务组件
03-25
这是一个使用antd-mobile @ 3中的规范，从新规划的基础antd-mobile @ 2组件的基础上开发的业务组件。 其中包含了一些约定和规范，任何参加此项目维护的朋友，都必须保持一下约定，如果你也需要基于antd-mobile @ 2...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 379
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1322
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
DAY05 CSS
最新发布
adminstate的博客
07-20 709
CSS样式
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 710
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 576
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Html_Css问答集(11)
白话魔法师
07-16 845
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 750
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 346
屏幕四周出现律动的红色边框，产生报警提示的效果。
antdmobile组件怎么上传视频
06-11
Ant Design Mobile（antd-mobile）并没有提供上传视频的组件，但是可以使用 Ant Design 的 `Upload` 组件来实现上传视频的功能。具体步骤如下： 1. 安装 Ant Design 和 Ant Design Mobile： ```bash npm install antd antd-mobile --save ``` 2. 在需要使用上传组件的页面引入 `Upload` 组件和 `Button` 组件： ```jsx import { Upload, Button } from 'antd'; ``` 3. 在页面中添加 `Upload` 组件： ```jsx <Upload> <Button>上传视频</Button> </Upload> ``` 4. 在 `Upload` 组件中添加上传视频的逻辑。可以使用 `beforeUpload` 方法来验证上传的文件格式和大小，并使用 `customRequest` 方法将视频上传到服务器。 ```jsx <Upload beforeUpload={this.beforeUpload} customRequest={this.uploadVideo} > <Button>上传视频</Button> </Upload> ``` 其中，`beforeUpload` 方法的实现可以参考下面的代码： ```jsx // 验证上传的文件格式和大小 beforeUpload = (file) => { const isVideo = file.type === 'video/mp4'; if (!isVideo) { message.error('只能上传 MP4 格式的视频！'); } const isLt100M = file.size / 1024 / 1024 < 100; if (!isLt100M) { message.error('视频大小不能超过 100MB！'); } return isVideo && isLt100M; } ``` `uploadVideo` 方法的实现可以参考下面的代码： ```jsx // 将视频上传到服务器 uploadVideo = (options) => { const { file, onSuccess, onError } = options; const formData = new FormData(); formData.append('video', file); // 发送 POST 请求上传视频 axios.post('/api/uploadVideo', formData).then((response) => { onSuccess(response.data, file); }).catch((error) => { onError(error); }); } ``` 完整代码实现如下： ```jsx import React from 'react'; import { Upload, Button, message } from 'antd'; import axios from 'axios'; class UploadVideo extends React.Component { // 验证上传的文件格式和大小 beforeUpload = (file) => { const isVideo = file.type === 'video/mp4'; if (!isVideo) { message.error('只能上传 MP4 格式的视频！'); } const isLt100M = file.size / 1024 / 1024 < 100; if (!isLt100M) { message.error('视频大小不能超过 100MB！'); } return isVideo && isLt100M; } // 将视频上传到服务器 uploadVideo = (options) => { const { file, onSuccess, onError } = options; const formData = new FormData(); formData.append('video', file); // 发送 POST 请求上传视频 axios.post('/api/uploadVideo', formData).then((response) => { onSuccess(response.data, file); }).catch((error) => { onError(error); }); } render() { return ( <Upload beforeUpload={this.beforeUpload} customRequest={this.uploadVideo} > <Button>上传视频</Button> </Upload> ); } } export default UploadVideo; ``` 需要注意的是，上传视频的具体实现要根据后端 API 的要求来进行调整。以上代码仅供参考。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

y199710

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值