inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

안드로이드 버튼이 정사각형으로 보이는 문제

해결된 질문

132

강프로그래머

작성한 질문수 110

0

안녕하세요 강사님!

날짜를 선택하면 아이폰에서는 원형으로 나오는데 안드로이드에서는 정사각형으로 나옵니다ㅠㅠ

image.pngimage.png

 

react-native typescript nestjs react-query zustand

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 강프로그래머님!

Android와 iOS에서 UI가 다르게 보이는 문제는 플랫폼별 기본 스타일 차이 때문에 발생할 수 있습니다. 특히 버튼이나 날짜 선택기 같은 컴포넌트는 각 OS에서 제공하는 기본 스타일과 디자인 가이드가 다르기 때문에 이런 차이가 생깁니다.

안드로이드에서 버튼이 정사각형으로 보이는 문제를 해결하기 위해, 다음의 방법들을 시도해보실 수 있습니다:

  1. 스타일 설정: react-native에서 스타일을 지정할 때, 플랫폼에 따른 구분(Platform.OS)을 통해 안드로이드와 iOS에서 다른 스타일을 각각 설정할 수 있습니다. 안드로이드에서는 추가로 borderRadius를 지정하여 버튼을 원형으로 만들 수 있습니다.
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    borderRadius: Platform.OS === 'android' ? 50 : 0,  // Android에서는 borderRadius 값을 설정
    // 추가적인 스타일...
  }
});
  1. 커스텀 컴포넌트 사용: 만약 기본 제공 컴포넌트를 사용할 때 생기는 문제라면, react-native의 Custom Button과 같은 커스텀 컴포넌트를 구현하여 일관된 디자인을 적용할 수 있습니다.

  2. 라이브러리 활용: react-native-paper 같은 UI 라이브러리를 사용하는 것도 고려해볼 수 있습니다. 이들 라이브러리는 크로스 플랫폼에서 일관된 스타일을 지원하도록 설계되어 있습니다.

관련된 유사 질문을 참고하시면 도움이 될 수 있을 것 같습니다:
- react-native-vector-icons 에러 관련 질문 - 이 게시물에서는 iOS와 Android 간의 화면 표시 차이 문제에 대해 논의하고 있으며, 유사한 해결책을 제시하고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

react-native-screens 버전 호환 문제

2

153

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

82

1

강의 수강 순서 관련

0

70

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2