테두리 반지름을 1개의 코너에만 사용하는 방법(리액티브)

테두리 반지름을 1개의 코너에만 사용하는 방법(리액티브)

React Native에서 테두리 반지름을 한 모서리에만 사용하는 방법

모달 윈도우가 있습니다.

아래 모서리가 둥글지 않은 것을 알 수 있듯이 버튼에 backgroundColor를 사용했을 때 발생합니다.modal wrapper에 overflow를 숨기려고 했는데 소용이 없었어요.이제 버튼에 테두리 반지름을 사용합니다(한 모서리에만 해당).

마이코드 http://jsbin.com/sexeputuqe/edit?html,css

당신은 이미 아래와 같이 시도했습니까?
-borderBottomLeftRadius: 번호
-borderBottomRightRadius: 번호
-borderTopLeftRadius: 번호
-borderTopRightRadius: 번호

또한 보기 구성 요소 문서에서 자세한 정보를 찾을 수 있습니다.

스타일에 다음 속성을 추가합니다.

• borderBottomLeftRadius: number
• borderBottomRightRadius: number
• borderTopLeftRadius: number
• borderTopRightRadius: number

이건 나한테 효과가 있었어.

감사해요.

이미지 태그의 왼쪽 상단 모서리와 왼쪽 하단 모서리에 반지름만 설정되어 있다고 가정합니다.

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

IOS에 적합해 보입니다.

react-native의 CSS 구문은 조금 다릅니다.

기존에는 다음을 사용할 수 있었습니다.

borderRadius:0,0,20,0;

여기서 경계선 값을 시계 방향으로 할당합니다.

그러나 이 경우 다음과 같이 요소의 개별 모서리를 공략해야 합니다.

borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 20,
borderBottomLeftRadius: 0,

이것이 당신에게 도움이 되는지 알려주세요.

언급URL : https://stackoverflow.com/questions/35341502/how-to-use-border-radius-only-for-1-corner-react-native