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

最新推荐文章于 2024-06-03 10:05:10 发布
最新推荐文章于 2024-06-03 10:05:10 发布
阅读量1.2w 收藏
点赞数 1
分类专栏： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZCLengendary/article/details/68491943
版权

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


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


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

ZCLegendary
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
RN View borderStyle只设置一边的Width无法显示
看开了
06-13 1087
<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代码如下： ...
推荐开源项目：react-native-dash —— 简易React Native虚线组件
最新发布
gitblog_00037的博客
06-03 289
推荐开源项目：react-native-dash —— 简易React Native虚线组件 项目地址:https://gitcode.com/obipawan/react-native-dash 在这个快速发展的移动应用开发领域中，我们常常寻求更高效、更灵活的组件来丰富我们的UI设计。今天，让我们一起来看看一个非常实用且轻量级的开源项目——react-native-dash。它为React Na...
react native Text 上无法指定borderWidth 等一系列属性
ISaiSai的专栏
11-12 5243
解决方法，在Text 外面添加一个View   ，在View 上面设置borderWidth 等一系列属性
React Native 椭圆虚线背景框
coosea128的博客
07-27 886
近日，在开发中有这样的需求，实现一个虚线的椭圆背景框，由于本人React Native 小白一枚，顿时两眼懵逼，赶紧查阅各种资料，发现React Native 自带支持 虚线，赶紧写个demo验证一下。下图是效果图 下面 是主要代码 class DashLine extends Component<Props>{ constructor(props){ super(props) } render(){ return(<View style={sty
React-Native画线平滑处理
苏小败在路上
10-12 6599
这次开发要手写画线，我们一般画线的时候是直接获取屏幕上的点，然后利用ART绘制出一天路径线： /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet
react-native-piechart:React Native 的饼图
06-05
React Native Piechart 是一个专为React Native开发的组件，它允许开发者在iOS和Android应用中创建和展示饼图。这个库基于JavaScript，利用了React Native的跨平台特性，提供了丰富的自定义选项，使得数据可视化更加...
react-native-swipetimepicker:一个简单的滑动时间选择器组件，用于响应本机
05-09
安装React本机> = 0.49 yarn add react-native-swipetimepicker属性Struts描述默认string backgroundColor 指定组件的背景色#828186 string borderColor 指定组件的边框颜色undefined number borderWidth 指定组件的...
react-native中AsyncStorage实例详解
08-30
在React Native中，AsyncStorage是一个轻量级的本地持久化存储解决方案，主要用于在应用程序的不同组件之间存储和检索数据。它采用异步操作，确保在处理数据时不会阻塞UI线程，提供了一套完整的API来操作键值对数据...
react-native-table-component::seedling:构建表以响应本机
04-30
import { Table , TableWrapper , Row , Rows , Col , Cols , Cell } from 'react-native-table-component' ; 变更日志 [v1.0.3] “ TableWraper”更改为“ TableWrapper”； [v1.1.1] 数据支持传入的元素类型 [v...
React-Native中一些常用组件的用法详解(一)
08-30
在React-Native中，开发移动应用时，我们经常会用到一系列基础组件，这些组件构成了UI的基本元素。在本文中，我们将深入探讨其中五个关键组件：View、Text、Touchable类组件、TextInput以及Image。 首先，**View...
React Native 基础篇
wang_yong_hui_1234的博客
10-26 1516
虽然React Native出来已经很久了，但是还是想分享一下。技术这东西更新的太快，觉得有用就学，不能犹豫，不然什么都不会。 一，环境配置 1，这里讲的是window+android配置，如果想了解其他配置请去官网查看（http://reactnative.cn/） 2，本人的配置步骤： ①，更新sdk，在SDK Platforms窗口中，选择Show Package Details...
RN:遇到一个字符串解构中的坑(安卓Release安装包中才出现)
iOSTianNan的博客
04-28 331
首先, 字符串可以看做一个 类似数组 的对象, 也可以通过解构的方式获取每个字符串 const [a,b,c,d,e] ="Hello"; console.log(a); //H console.log(b); //e console.log(c); //l console.log(d); //l console.log(e); //o 出现的问题 let numStri...
RN运行iOS编译报错，安卓正常
u011189158的专栏
11-10 347
ReactNative RN报错Cannot initialize a parameter of type 'NSArray *' with an lvalue of type 'NSArray *__strong'
React Native之样式篇
yingzizizizizizzz的专栏
09-05 1042
昨天会调试之后，今天迫不及待的就开始练习了。实现了一个电影列表，想让其样式变好看点，想要实现border：1px soild #ccc 不好意思，RN告诉你不能这么用，于是百度呀。。。 只能这样用： 1、边框类 borderWidth//边框宽度，单方向设置为borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth...
React学习笔记(七) —— HTML DOM style 的属性设置
丸啊~
01-07 3694
基本使用 在React中使用 style 设置行内样式的基本用法如下： render () { return ( <div style={{ background: '#fff', height: '50px', width: '100%', fontSize:"16px"}}><div/> ) } React中的style属性设置时的格式为json格式，注意使用驼峰命名法。 常用属性 height： 属性设置或返回元素的高度。height 属性只在块级元素或绝对/固定位置
让边框线变细
马优晨
03-31 6189
常见的边框线 使用1px 但是 实际效果是显示的很宽，在苹果设备上 1px 会变成2px ,如果想要border变细，常用最简单的方法： border: solid #eee thin; 效果 手机大小： 放大以后效果： ...
border属性容易犯的低级错误
weixin_45190226的博客
11-21 774
先看下面不能正常运行的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border属性易犯的错误</title> <style> span{border: 3px brown} </style> </head> <body> <s
react-native布局和样式设置
番薯大佬的专栏
05-09 5124
const styles = StyleSheet.create({ // 样式名称 nameStyle: { // 方向：默认纵向column，横向row flexDirection: column, // 分行：wrap，或nowrap flexWrap: wrap, // flex-start、flex-end、center、space-betwee...
react-native-calendars 给出一个自定义样式的例子
06-07
好的，下面是一个使用 react-native-calendars 库自定义样式的例子： ```javascript import React from 'react'; import {View, StyleSheet} from 'react-native'; import {Calendar, CalendarList, Agenda} from 'react-native-calendars'; export default function CustomCalendar() { return ( <View style={styles.container}> <Calendar // 自定义日历的整体样式 style={{ borderWidth: 1, borderColor: 'gray', height: 300, }} // 自定义日期文字的样式 dayTextStyle={{ color: 'red', }} // 自定义选中日期的背景色 markingType={'period'} markedDates={{ '2022-01-01': { startingDay: true, color: 'green', }, '2022-01-02': { color: 'green', }, '2022-01-03': { endingDay: true, color: 'green', }, }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#F5FCFF', }, }); ``` 在这个例子中，我们自定义了日历的整体样式、日期文字的样式和选中日期的背景色。可以根据自己的需求自定义更多的样式属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值