React-Native 中设置borderWidth 遇到的坑..

最新推荐文章于 2026-06-26 07:03:49 发布
原创 最新推荐文章于 2026-06-26 07:03:49 发布 · 1.2w 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文描述了使用React Native (RN) 开发时遇到的一个UI适配问题：在iPhone 6s Plus等5.5寸设备上出现底部黑色色块的情况。经过排查发现，设置<View>的borderWidth为0.5导致该问题发生，调整为1后问题解决。作者建议避免设置过小的width值。

最近用RN写一个硬件的操作插件,同时iPhone 5s, iPhone 7, iPhone 6s Plus 三种不同尺寸的机器做 UI 适配,在plus 机器上出现了如图所示的问题.


没错,底部出现了黑色色块!但是代码中并没有在这里有添加其他的<View>!而其他两款手机(5.5寸以下)没有出现这个问题.刚刚在设置底部<View> borderWidth的时候,把原来的 0.5 改成了 1,再次刷新...就正常了...


好了!又重复的测试了几次,原因终于找到了.....看来width设置小于1在5.5寸的iOS机器上是行不通的了!小伙伴们以后一定要注意了!

《React-Native系列》45、踩坑记录
等待就是浪费青春
03-16 7915
记录几个最近在项目中遇到的坑，RN版本使用0.29.2。1、在Android平台上Text标签的 lineHeight 需要设置成int ，否则会crash；在iOS平台上没有问题。如下图：com.facebook.react.bridge.UnexpectedNativeTypeException: TypeError: expected dynamic type `int64', but ha
React Native样式总结
yingzizizizizizzz的专栏
09-05 543
转自：https://blog.csdn.net/Wbiokr/article/details/79133409 布局类（flex） 具体可参考 justifyContent//主轴上对齐方式 alignItems//副轴上对齐方式 flexDirection//flex布局方向 flexWrap//flex换行设置 flexGrow//（子元素）放大权重 flexShrink//(子元素)...
RN View borderStyle只设置一边的Width无法显示
看开了
06-13 1306
<View style={{height:computedRem(0.04),overflow:"hidden",marginVertical:computedRem(0.25)}}> <View style={{ borderColor:"#CACACA", borderWidth:computedRem(0.04), borderStyle:"dotted", height:0, borderRadius:0.1 }}> </View> &
ReactNative组件的borderColor和borderRadius属性踩坑记录
热门推荐
桑心剑
12-14 2万+
问题 今天小程序平台项目中发现Android上自定义的ReactNative的Text组件样式显示不正确，具体表现如下图所示： 可以看到图中组件显示主要存在两个问题： 1、左右黑边；2、左右锯齿； 好嘛，这里自定义的组件是继承RN原有组件生成的，于是果断把同样的样式代码放到RN自己的Text组件里写个demo一看，竟然也有这两个问题。再换View组件也试一下，好吧，表现一样，demo代码如下： ...
千峰web前端入门html+css笔记（一）
m0_57315637的博客
04-10 1427
标题描述
React Native之样式篇
yingzizizizizizzz的专栏
09-05 1229
昨天会调试之后，今天迫不及待的就开始练习了。实现了一个电影列表，想让其样式变好看点，想要实现border：1px soild #ccc 不好意思，RN告诉你不能这么用，于是百度呀。。。 只能这样用： 1、边框类 borderWidth//边框宽度，单方向设置为borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth...
react-native－那些年我遇到的那些坑
chuanwu0256的博客
03-27 221
前言 新人一枚，刚刚接触react-native ，许多坑被踩到，本文将持续纪录我在开发时遇到的坑，也或许不是坑只是我没有合理的运用react-native,但我相信，很多像我一样的新人可能都会经历这样一个阶段。本文不仅仅纪录了我遇到的问题，也纪录了我的成长，当然也许作为老手的你在看到本文...
react-native-image-progress完全指南：为React Native网络图片添加专业进度指示器
gitblog_01145的博客
06-26 937
想要为React Native应用中的网络图片添加专业的进度指示器吗？react-native-image-progress正是你需要的终极解决方案！这个强大的库能够为你的网络图片加载过程提供流畅的视觉反馈，让用户体验更加完美。无论你是React Native新手还是经验丰富的开发者，本指南将带你从零开始，掌握react-native-image-progress的完整使用方法。 ## 📱 什
如何在React Native中集成react-native-multi-slider？5分钟快速上手教程
gitblog_00776的博客
06-20 268
react-native-multi-slider是一款支持Android和iOS平台的纯JS滑块组件，可实现多标记点滑动功能，帮助开发者轻松构建交互式滑动控件。本文将带你快速掌握从安装到自定义配置的完整流程，让你的React Native应用在5分钟内拥有专业级滑块体验。 ## 📦 一键安装步骤 首先确保你的React Native项目已正确配置开发环境，然后通过npm或yarn安装组件：
React Native样式设计完全指南：从Flexbox到UI库的完整教程
gitblog_00305的博客
06-19 1004
想要构建出色的移动应用界面吗？React Native样式设计是每个开发者必须掌握的核心技能。这份终极指南将带你从零开始，深入理解React Native的样式系统，掌握Flexbox布局的精髓，并探索强大的UI库资源，助你打造专业级移动应用界面。 React Native作为跨平台移动应用开发框架，其样式设计与传统的Web CSS有所不同，但同样强大而灵活。通过本指南，你将学会如何高效地使用R
react native Text 上无法指定borderWidth 等一系列属性
ISaiSai的专栏
11-12 5397
解决方法，在Text 外面添加一个View   ，在View 上面设置borderWidth 等一系列属性
react-native-image-progress终极配置指南：自定义进度指示器样式与行为
最新发布
gitblog_00072的博客
06-26 479
React Native 开发者在处理网络图片加载时，经常需要向用户展示加载进度。react-native-image-progress 就是这样一个专门为 React Native 设计的网络图片进度指示器组件。这个强大的工具让您能够轻松地为图片加载过程添加专业的进度指示，提升应用的用户体验。无论您是新手还是有经验的开发者，本终极配置指南都将帮助您完全掌握这个组件的自定义配置方法。 ## 🚀
如何自定义recipes-app-react-native：UI美化与主题定制教程
gitblog_00321的博客
06-10 649
recipes-app-react-native是一款基于React Native开发的食谱应用，通过简单的修改即可实现个性化的UI美化与主题定制。本文将为你提供完整的定制指南，让你的食谱应用焕然一新。 ## 准备工作：获取项目源码 首先需要将项目代码克隆到本地： ```bash git clone https://gitcode.com/gh_mirrors/re/recipes-app-
10分钟上手react-native-image-colors：快速集成图片配色功能
gitblog_00743的博客
06-19 828
react-native-image-colors是一个专为React Native应用设计的实用库，能够帮助开发者快速提取图片中的主色调和突出颜色。无论是构建视觉一致性强的UI界面，还是实现动态主题切换功能，这个轻量级工具都能让你在10分钟内轻松搞定图片配色需求。 ## 为什么选择react-native-image-colors？ 在移动应用开发中，根据图片内容自动调整界面配色可以极大提升
react-native 前端页面常见属性介绍使用
OMGbeast的博客
07-11 950
刚进入公司实习第一个月，之前在学校没有接触过RN，所以在实习之前对于RN我是一个小白，在一个月的实习做项目中，以下是我总结的常用的RN属性，还在成长努力中的前端爱好者！ React native常见属性设置： 1.布局 父视图属性(容器属性)： flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’) flexWrap enum(‘wrap’, ‘nowrap’) justifyContent enum(‘fl...
React Native Share Extension快速入门：从零到一构建你的第一个分享扩展
gitblog_00992的博客
06-22 430
react-native-share-extension是一个强大的工具，它能让开发者使用React Native作为引擎来驱动应用的分享扩展功能，轻松实现在iOS和Android平台上的内容分享功能。 ## 🚀 为什么选择React Native Share Extension？ 在移动应用开发中，分享功能是提升用户体验和应用传播的关键特性。React Native Share Exten
React Native Map Link自定义弹窗指南：打造个性化地图选择界面
gitblog_00604的博客
06-19 1078
🚀 想要在React Native应用中实现美观、个性化的地图应用选择界面吗？React Native Map Link的自定义弹窗功能正是你需要的解决方案！这个强大的库不仅能让用户选择他们喜欢的地图应用，还能让你完全控制弹窗的外观和交互体验。 ## 为什么需要自定义弹窗？ 🤔 默认情况下，React Native Map Link会显示系统原生的操作菜单，但有时这无法满足特定的设计需求。
react-native 获取组件边框一个实际像素的宽度
学习笔记666
12-27 1405
import {pixelRatio }'react-native' pixelRatio = pixelRatio.get() 获得一个实际像素的宽度 borderWidth/pixelRatio
react native ScrollableTabView日记
dingqianglao4537的博客
11-30 213
初学react native ，记录自己挖坑日记 "react-native": "0.50.3", "react-native-scrollable-tab-view": "0.8.0" 坑1。 在使用scrollableTableView 组件的时候，tabbar下面会有默认的一条直线， 设置组件的style并不能解决，官方文档也没有将清楚 如图： 解...
React native Image组件
qq_23515901的博客
06-03 325
react native(创建react native项目)[环境|创建]react native 常用组件 Image 属性 方法 创建项目 $ npm install -g react-native-cli $ react-native init project译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：npm c
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值