[TIL-156] React Native

빈공간 터치하면 키보드 내리기

Keyboard.dismiss()

Keyboard 객체에 dismiss()라는 메서드가 있다. TouchableWithoutFeedback 컴포넌트와 함께 쓰면 된다.

1. TouchableWithoutFeedback과 Keyboard를 import 한다.
2. TouchableWithoutFeedback에 onPress 함수에 Keyboard.dismiss() 추가.

• https://medium.com/@binarydiver/react-native-dismiss-keyboard-23ddafbb981d
• [React Native] 빈공간 클릭시 Keyboard 사라지게 하는법 https://matthew-jo.tistory.com/15

 

React.Children.only expected to receive a single React element child.

  return (
    <TouchableWithoutFeedback style={styles.container} onPress={() => {}}>
      <StatusBar backgroundColor="rgb(18, 18, 18)" />
      <View style={styles.logo}>
        ...
      </View>

      <View style={styles.kampPay}>
        ...
      </View>
    </TouchableWithoutFeedback>
    )

TouchableWithoutFeedback 컴포넌트는 여러 개의 자식 컴포넌트를 둘 수 없는 모양이다. 전체를 View로 감싸고 그 View를 다시 감싸면 에러가 없어진다.

 

 

React Native Pin View

pin view 라이브러리 사용하기

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

 

pinView

const pinView = useRef(null)
const [enteredPin, setEnteredPin] = useState('');

pinView.current.clearAll()

return (
    <PinView
      ref={pinView}
      onValueChange={value => setEnteredPin(value)}
      onButtonPress={key => {
        if (key === 'custom_right') {
          pinView.current.clear();
        }
      }
    />
)

한 글자만 지우는 clear()와 clearAll() 메서드가 있다.

 

 

buttonTextByKey

이 prop을 사용해서 각 버튼에 보여지는 숫자(문자)를 바꿀 수 있다. 객체를 전달받는데 one, two, ... , nine, zero까지 key가 있어서 각 key는 버튼의 위치이며, 값은 해당 위치에 보여지는 문자가 된다. 하지만 각 자리가 눌렸을 때 입력되는 값은 변하지 않는다. 예를 들어, one 키의 값을 3으로 바꾸어도 해당 버튼이 눌리면 1이 입력된다.

 

  const [numbers, setNumbers] = useState([]);
  
  
  useEffect(() => {
    setNumbers(randomNum());
  }, []);


  const randomNum = () => {
    const keypadNum = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    return keypadNum.sort(() => Math.random() - 0.5);
  };

  const fixNum = wrongNum => {
    const arr = wrongNum.split('');
    for (let i = 0; i < arr.length; i++) {
      const index = arr[i];
      if (index === 0) {
        arr[i] = numbers[9];
      } else {
        arr[i] = numbers[index - 1];
      }
    }
    return arr.join('');
  };
  
  return (
  	<PinView
          ref={pinView}
          pinLength={6}
          onValueChange={value => setEnteredPin(value)}
          buttonTextByKey={{
            one: numbers[0],
            two: numbers[1],
            three: numbers[2],
            four: numbers[3],
            five: numbers[4],
            six: numbers[5],
            seven: numbers[6],
            eight: numbers[7],
            nine: numbers[8],
            zero: numbers[9],
          }}
        />

그래서 우선 랜덤한 숫자를 담은 배열(randomNum()이용)로 키패드의 text를 바꾼 뒤, 기존 키패드의 번호대로 받은 value를 한번 더 변환해줬다.

• Javascript - 배열의 요소를 무작위로 섞는 방법 [array, shuffle]  https://7942yongdae.tistory.com/96  
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

["8", "2", "7", "0", "9", "5", "4", "6", "1", "3"] "123456" "920768"
6자 완성: 123456 920768 12456

그런데 문제는 0 자리가 입력되었을 때 9번 인덱스의 숫자가 나오지 않고.... 0이 문제인가 싶어서 이리저리 조금씩 코드를 바꿔봤지만 통하지 않았다.

그러다 if문 외에는 다른 숫자와 달리 잘 나오지 않을 이유가 없다고 생각해서 if(index===0)을 자세히 살펴보고 깨달았다. 확인하고 있는 숫자가 문자열 타입이기 때문에 0과 ===로 비교했을 때 일치하지 않았던 것이다. ===을 ==로 바꾸니 잘 작동한다....ㅠㅠ

 

 

 

암호화 - tink

https://developers.google.com/tink

 

 

 

오류

ExceptionsManager.js:149 Error: [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.
To fix this issue try these steps:
• Rebuild and restart the app.
• Run the packager with `--reset-cache` flag.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.

라이브러리 깔았다가 에러가 남.

 

> Task :app:mergeLibDexDebug FAILED

그래서 다시 실행했더니...

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeLibDexDebug'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingTaskDelegate
> There was a failure while executing work items
> A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingWorkAction
> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.
Type com.reactnativecommunity.asyncstorage.AsyncLocalStorageUtil is defined multiple times: /Users/jeonseulgi/Desktop/iaurora/node_modules/@react-native-async-storage/async-storage/android/build/.transforms/a85af5530ce5fc659f09e945ecd046d1/transformed/classes/classes.dex, /Users/jeonseulgi/Desktop/iaurora/node_modules/@react-native-community/async-storage/android/build/.transforms/512453a81d6518258058982ee5333435/transformed/classes/classes.dex
* Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org

https://kwonsaw.tistory.com/412

https://velog.io/@maliethy/appmergeExtDexDebug-FAILED-error%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

https://blog.naver.com/PostView.naver?blogId=gu04005&logNo=222410287091&categoryNo=43&parentCategoryNo=20&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView => 이거는 플러터??

 

 

[오류해결] npm install 설치시 npm ERR! code ERESOLVE https://iancoding.tistory.com/154

 

 

 

 

 

 

블로커

TypeError: Network request failed

어제 잘 되던 게 갑자기 안 돼서 별 고생을 다했는데, 안드로이드 이뮬레이터로 사용하는 실제 기기에서 와이파이를 안 켜고 있었다.

웹 개발을 할 때는 노트북으로 코드 쓰고, 브라우저로 돌려보고 한번에 다했으니 노트북 와이파이만 확인해도 됐다. 하지만 이제 앱을 실행하는 휴대폰이 이전에 웹 사이트를 테스트하던 브라우저와 같은 역할이다. 아무래도 아직까지 앱 환경을 신경쓰지 못하고 있는 것 같다.