actions 객체 배열을, map을 통해 JSX 배열로 변환했습니다. 이때 주의할 점은 key 값을 설정해줘야 한다는 점입니다. 리액트에서 배열을 렌더링할 때는 고유한 값을 key Props로 지정해줘야 합니다. 자세한 내용은 이 링크를 참고하세요.
• http://bit.ly/react-reconcile
컴포넌트를 다 작성한 뒤에는 CameraButton에서 사용한 UploadModeModal을 지우고 방금 만든 ActionSheetModal로 대체해보세요.
components/CameraButton.js - 기존 UploadModeModal의 코드 대체
import ActionSheetModal from './ActionSheetModal'; (...) <ActionSheetModal visible={modalVisible} onClose={() => setModalVisible(false)} actions={[ { icon: 'camera-alt', text: '카메라로 촬영하기', onPress: onLaunchCamera, }, { icon: 'photo', text: '사진 선택하기', onPress: onLaunchImageLibrary, }, ]} />
안드로이드에서 화면 하단의 카메라 버튼을 눌렀을 때 이전처럼 모달이 잘 나타나는지 확인해보세요. 잘 나타난다면 이제 UploadModeModal 컴포넌트는 불필요하므로 삭제해주세요.