[TIL-155] React Native UI 만들기 & 안드로이드 테스트

안드로이드 fetch 문제

android/app/src/main/AndroidManifest.xml

android:usesCleartextTraffic="true"

fetch를 처음으로 시도했는데 "Network request failed"라는 에러가 뜸.

• [React Native] fetch 사용 시 안드로이드 localhost에서 "Network request failed" 해결법  https://gochibul.tistory.com/5
• Android 실행시 React-Native Local server에 연결되지 않을 때  https://7stocks.tistory.com/165

 

 

React Native에서 fetch 시 415 에러

content-type: application/json

fetch('users/idcheck', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        trinity_id: idText,
      }),
    })

body는 맞는 형식으로 보냈는데 어떤 값을 보내든 계속 415 에러가 나서 찾아봤더니 headers에 content-type을 보내야 했다. 웹에서 통신할 때는 필요하지 않았는데 앱이라서 필요한 것 같다. 어째 다른 코드들을 볼 때마다 headers에 뭔가가 한두줄씩은 써있던데, 앱으로 통신할 때는 추가적인 정보가 더 필요했던 모양이다.

https://stackoverflow.com/questions/52934771/react-native-request-failed-with-415

 

 

안드로이드 스튜디오에서 실행하기

Could not connect to development server.

vsc에서 emulator를 통해 실행해보다가 안드로이드 스튜디오에서 실제 기기를 연결하여 run 했는데 이렇게 뜬다. 생각해보니 이뮬레이터에서도 봤던 문구였음. 즉, 안드로이드 스튜디오에서도 run 한 후 터미널에서 npm run android를 해야 함.

• 앱 빌드 및 실행  https://developer.android.com/studio/run?hl=ko#RunningApp 
• 하드웨어 기기에서 앱 실행   https://developer.android.com/studio/run/device?hl=ko 

 

 

AndroidManifest.xml   "adjustPan"

textInput을 눌러 키보드가 뜨면 위로 화면이 밀려 올라가는 상황 해결

android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="adjustPan"

 

https://stackoverflow.com/questions/42840555/how-to-avoid-keyboard-pushing-layout-up-on-android-react-native

 

 

Render Error: Minified React error #321;

import React, {useState, useRef} from 'react';
import {
  KeyboardAvoidingView,
  View,
  StatusBar,
  Text,
  Image,
  StyleSheet,
} from 'react-native';
import PinView from 'react-native-pin-view';
import {useEffect} from 'react/cjs/react.production.min';

useEffect 쓸 때 자동으로 import된 게 이상하게 돼있었다.

 

 

navigation.navigate("screenName", {option: "option"})

navigation.navigate('PwVerify', {idText});

네비게이팅하면서 값을 전달하고 싶을 때, 객체로 두번째 인자에 담아 전달할 수 있다.

 

const PwVerify = ({route, navigation}) => {
  const {idText} = route.params;
}

받을 땐, 이동한 스크린 컴포넌트에서 navigation과 함께 route를 props로 받는다. 그리고 route.params로 객체의 각 property에 접근할 수 있다.

 

 

 

기본 넘버 패드

https://www.npmjs.com/package/react-native-numpad

 

 

핀뷰(비밀번호)

https://www.npmjs.com/package/react-native-pin-view

 

letterSpacing - 자간 설정

https://infinitbility.com/react-native/letter-spacing-in-react-native

 

리액트 네이티브 <Text> 컴포넌트에서 개행하기

https://tagilog.tistory.com/597