react / react/react-native

borderStyle: 'dashed' doesn't work correctly

未关闭
#32,918 28 条评论 10 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Needs: Triage :mag:
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

Dear Developers:
I am trying to control the style of View.
When 'Dashed' pressed, the style of View will be changed, especially the borderStyle will be set as 'dashed'.

The problem is, when I run this on iOS devices, the dashed border line and the solid border line are coexisted. It only appears when overflow is set as 'hidden'

image

Waiting for your answer : )

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  item: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    overflow: 'hidden'
  },
  addItem: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'red',
    borderRadius: 4,
    borderStyle: 'dashed',
    overflow: 'visible'
  }
})

const HelloWorldApp: React.FC = () => {
  const [st, setSt] = useState(styles.item)
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
      <View style={st}/>
      <Text onPress={() => {
        setSt(styles.addItem)
      }}>Dashed</Text>
      <Text onPress={() => {
        setSt(styles.item)
      }}>Reset</Text>
    </View>
  )
}
export default HelloWorldApp;
Version

0.66.00

Output of npx react-native info

I dont have any info because I reproduced this problem on reactnative.dev/docs/tutorial

Steps to reproduce

You can paste code here reactnative.dev, where I met this problem.

Run with iOS device and click the 'Dashed' Text, you will met same problem, I think.

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  item: {
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    overflow: 'hidden'
  },
  addItem: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'red',
    borderRadius: 4,
    borderStyle: 'dashed',
    overflow: 'visible'
  }
})

const HelloWorldApp: React.FC = () => {
  const [st, setSt] = useState(styles.item)
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
      <View style={st}/>
      <Text onPress={() => {
        setSt(styles.addItem)
      }}>Dashed</Text>
      <Text onPress={() => {
        setSt(styles.item)
      }}>Reset</Text>
    </View>
  )
}
export default HelloWorldApp;
Snack, code example, screenshot, or link to a repository

No response

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从提供的 View 复现开始,并在 iOS 设备上运行它,重点关注 borderStyle、borderWidth、borderRadius 和 overflow 之间的交互。当在 overflow 为 hidden 时从 solid 样式切换为 dashed 样式不再留下可见的 solid border 后,该 issue 即完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
ios, react-native
领域
mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
活跃
描述清晰度
基本清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。