react / react/react-native

borderStyle: 'dashed' doesn't work correctly

オープン
#32,918 コメント 28 件 リアクション 10 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Needs: Triage :mag:
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
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. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

提供された View reproduction から始め、iOS デバイス上で実行し、borderStyle、borderWidth、borderRadius、overflow の相互作用に注目します。overflow が hidden の場合に、solid style から dashed style に変更しても solid border が表示されたままにならなくなれば、issue は完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, react-native
領域
mobile
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
55/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。