React Native iOS에서 겪은 두 가지 문제와 해결 방법

안녕하세요! 오늘은 React Native 프로젝트를 iOS에서 빌드하면서 발생했던

두 가지 문제를 공유하려고 합니다.
이 글이 비슷한 문제를 겪는 분들께 도움이 되었으면 좋겠습니다.

---

1. SavedResultsScreen에 뒤로가기 버튼 추가

문제 상황

SavedResultsScreen에서 뒤로 가기를 통해 메인 화면으로 돌아가는 기능이 없었습니다.
iOS의 기본 뒤로 가기 버튼이나 제스처가 작동하지 않는 경우 사용자 경험이 불편할 수 있습니다.

---

해결 방법

뒤로 가기 버튼을 추가하고 navigation을 통해 메인 화면으로 이동하도록 설정했습니다.

추가된 코드

1. 뒤로 가기 함수 추가:

const navigateToMainScreen = () => {

    navigation.navigate('MainScreen'); // MainScreen으로 이동

  };

1. UI에 버튼 추가:

  <View style={styles.headerContainer}>

  <Text style={styles.headerTitle}>분석 결과</Text>

  <TouchableOpacity onPress={navigateToMainScreen} style={styles.backButton}>

    <Text style={styles.backButtonText}>뒤로가기</Text>

  </TouchableOpacity>

</View>

---

결과

• 사용자 경험 개선: 뒤로 가기 버튼을 명시적으로 추가해 사용자가 쉽게 메인 화면으로 돌아갈 수 있습니다.

---

2. MainScreen에서 Profile 모달 위치 수정

문제 상황

MainScreen에서 프로필 버튼이 화면 맨 위에 너무 붙어 있어 터치하기 어려웠습니다.
iOS에서는 이런 위치 문제로 인해 버튼이 잘 눌리지 않는 경우가 종종 발생합니다.

---

해결 방법

marginTop 값을 추가해 버튼의 위치를 아래로 내렸습니다.

변경된 코드

profileButton: {

    marginTop: 100, // 버튼을 아래로 내려 접근성 개선

    padding: 5,

    borderRadius: 20,

    backgroundColor: 'transparent',

    justifyContent: 'center',

    alignItems: 'center',

  },

 

 

---

결과

• 버튼 터치 영역 확보: 버튼이 화면 아래로 내려가면서 쉽게 터치할 수 있게 되었습니다.
• UI 개선: 버튼이 더 자연스러운 위치에 배치되었습니다.

---

정리

1. SavedResultsScreen:
   • 뒤로 가기 버튼 추가로 메인 화면으로 쉽게 이동 가능.
2. MainScreen:
   • 프로필 버튼의 위치를 조정하여 iOS에서 잘 눌리지 않는 문제 해결.