Development Tip

한 모서리에만 테두리 반경을 사용하는 방법 (반응 네이티브)?

yourdevel 2020. 12. 9. 21:49
반응형

한 모서리에만 테두리 반경을 사용하는 방법 (반응 네이티브)?


React Native에서 1 코너에만 테두리 반경을 사용하는 방법은 무엇입니까?

모달 창이 있습니다

http://f1.s.qip.ru/etSMz5YP.png

하단 모서리가 둥글 지 않은 것을 볼 수 있듯이 버튼에 backgroundColor를 사용했을 때 발생합니다. 모달 래퍼에 숨겨진 오버플로를 설정하려고 시도했지만 도움이되지 않았습니다. 이제 버튼에 테두리 반경을 사용하고 싶습니다 (1 개의 모서리에만 해당).

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


이미 다음을 시도 했습니까?
- borderBottomLeftRadius: 숫자
- borderBottomRightRadius: 숫자
- borderTopLeftRadius: 숫자
- borderTopRightRadius: 숫자

또한 뷰 컴포넌트 문서 에서 더 많은 정보를 찾을 수 있습니다 .


  • borderBottomLeftRadius : 숫자
  • borderBottomRightRadius : 숫자
  • borderTopLeftRadius : 숫자
  • borderTopRightRadius : 숫자

이것은 나를 위해 일했습니다.

감사


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

<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에 잘 어울립니다.

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

반응형