혀니의 이거저거 뿌시기

아마 개발 1일차.. 실황 정리 (react native accessible / 안드로이드 기기 연결) 본문

FRONT/리액트네이티브

아마 개발 1일차.. 실황 정리 (react native accessible / 안드로이드 기기 연결)

혀니리리 2023. 5. 2. 14:33
728x90

안드로이드 talkback, 아이폰 voiceOver기능 구현을 위해 react native에서 만든 모듈이 바로 accessible모듈

https://reactnative.dev/docs/accessibility

 

Accessibility · React Native

Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS.

reactnative.dev

우선 조금의 연구를 해본 결과, mac (노트북) 안에서 개발할 경우 애뮬레이터 안에서 접근성 설정을 바꿀 수 없어서 따로 기기와 mac을 연결시켜야 할 듯 하다.

 

https://velog.io/@maliethy/RN-run-on-android-device

 

React-native android 실제 기기 연결하기

1. issue android studio의 emulator을 연결해 react-native-cli를 돌리면 노트북이 숨막힐 정도로 느려진다. 그래서 실제 android기기에 연결해보기로 했다. 2. solution 가장 먼저 android기기(나의 경우 s10)의 설정

velog.io

연결은 이렇게

 

연결이 잘 완료되면 react-native run-android를 했을 때 핸드폰 화면에서 화면을 볼 수 있음

 

accessible

이것이 true가 되었을 때 한 view를 하나의 묶음으로 합쳐주고 하나하나의 버튼들을 묶어서 통으로 읽어주게 됨

accessibilityLabel

accessible과 같이 썼을 때, label로 설정한 문장을 읽어주게 됨

 

 

이를 활용해서 어디를 읽게 하고 어디를 안 읽게 할지 정할 수 있을 듯 하다

 

+추가

기존과 달리 App.js 가 아닌 App.tsx로 나오는데 그 이유는?

https://reactnative.dev/docs/typescript

 

Using TypeScript · React Native

TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow.

reactnative.dev

대충 검색해보니.. 버전이 바뀜에 따라서 자바스크립트에서 타입스크립트로 변화한듯 하다..  maybe?

내가 적응하는 수밖에..

728x90

'FRONT > 리액트네이티브' 카테고리의 다른 글

react native 기본 코드 바탕으로 스크롤뷰 초안 만들기  (0) 2023.05.05
react native 기본 제공 코드 분석 (App.tsx)  (0) 2023.05.05
리액트 네이티브 맥 Mac 설치 오류 타파 (23.04.28 기점)  (0) 2023.04.28
react native 이미지 가로배열  (0) 2022.04.17
react Splash Screen(로딩화면) 구현하기  (0) 2022.04.16
'FRONT/리액트네이티브' Related Articles more