React Native Getting Started νŽ˜μ΄μ§€μ˜ λ‚΄μš©μ„ λ”°λΌν•˜λ©΄μ„œ λ°œμƒν•œ λ¬Έμ œλ“€μž…λ‹ˆλ‹€.

기본적인 μ„€μΉ˜ 및 ꡬ성은 νŽ˜μ΄μ§€λ₯Ό 보며 μ§„ν–‰ν–ˆμŠ΅λ‹ˆλ‹€.

μ €μ˜ ν™˜κ²½μ€ macOS 10.14.5 μž…λ‹ˆλ‹€.

Expo λŠ” μ‚¬μš©ν•˜μ§€ μ•Šκ³ , React Native CLI 둜 ν”„λ‘œμ νŠΈλ₯Ό μŠ€μΊν΄λ”©ν–ˆμŠ΅λ‹ˆλ‹€.

Node, XCode, Android Studio κ°€ μ„€μΉ˜λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

  • Node v11.7.0
  • npm v6.5.0
  • Xcode v10.2.1 (10E1001), XCode command line tools installed
  • Android Studio v3.4, Android SDK installed

Xamarin 으둜 μž‘μ„±λœ λͺ¨λ°”일 μ‘μš©ν”„λ‘œκ·Έλž¨μ„ React Native 둜 μž¬μž‘μ„±ν•˜κΈ° μœ„ν•΄ ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

$ react-native init ScoreBoard

이제 μ„œλžμž₯ ν˜•μ‹μœΌλ‘œ λ™μž‘ν•˜λŠ” 메뉴λ₯Ό μž‘μ„±ν•˜κΈ° μœ„ν•΄ λ„€λΉ„κ²Œμ΄μ…˜ κ΄€λ ¨ νŒ¨ν‚€μ§€ μΆ”κ°€ν•˜κ³  μ‹€ν–‰ν•˜λ‹ˆ 또 λ¬Έμ œκ°€ λ°œμƒν•©λ‹ˆλ‹€.

react-native-gesture-handler νŒ¨ν‚€μ§€λŠ” λ„€μ΄ν‹°λΈŒ μ½”λ“œκ°€ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ link λͺ…λ ΉμœΌλ‘œ ν•΄λ‹Ή λ‚΄μš©μ„ 각 ν”Œλž«νΌ ν”„λ‘œμ νŠΈμ— μΆ”κ°€λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

νŽ˜μ΄μ§€μ˜ μ„€λͺ…λŒ€λ‘œ μ•„λž˜ λͺ…령을 μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ react-native link react-native-gesture-handler

μ•ˆλ“œλ‘œμ΄λ“œ 가상μž₯μΉ˜μ—μ„œ ν™•μΈν•˜κΈ° μœ„ν•΄ μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ react-native run-android
react-native run-android
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
  - react-native-gesture-handler (to unlink run: "react-native unlink react-native-gesture-handler")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Starting JS server...
info Installing the app...

> Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warnings
14 actionable tasks: 2 executed, 12 up-to-date
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:3: error: package android.support.v4.util does not exist
import android.support.v4.util.Pools;
                              ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:19: error: package Pools does not exist
  private static final Pools.SynchronizedPool<RNGestureHandlerEvent> EVENTS_POOL =
                            ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:3: error: package android.support.v4.util does not exist
import android.support.v4.util.Pools;
                              ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:19: error: package Pools does not exist
  private static final Pools.SynchronizedPool<RNGestureHandlerStateChangeEvent> EVENTS_POOL =
                            ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:20: error: package Pools does not exist
          new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE);
                   ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:20: error: package Pools does not exist
          new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE);
                   ^
Note: /Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
6 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* 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

BUILD FAILED in 5s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:3: error: package android.support.v4.util does not exist
import android.support.v4.util.Pools;
                              ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:19: error: package Pools does not exist
  private static final Pools.SynchronizedPool<RNGestureHandlerEvent> EVENTS_POOL =
                            ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:3: error: package android.support.v4.util does not exist
import android.support.v4.util.Pools;
                              ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:19: error: package Pools does not exist
  private static final Pools.SynchronizedPool<RNGestureHandlerStateChangeEvent> EVENTS_POOL =
                            ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:20: error: package Pools does not exist
          new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE);
                   ^
/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:20: error: package Pools does not exist
          new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE);
                   ^
Note: /Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
6 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* 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

BUILD FAILED in 5s

    at checkExecSyncError (child_process.js:625:11)
    at execFileSync (child_process.js:643:13)
    at runOnAllDevices (/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:75:39)
    at buildAndRun (/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:137:41)
    at then.result (/Users/bbon/Repos/scoreboard-rn/ScoreBoard/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:103:12)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)

좜λ ₯된 μ—λŸ¬ λ©”μ‹œμ§€ κ΄€λ ¨ λ‚΄μš©μœΌλ‘œ κ²€μƒ‰λœ κΉƒν—ˆλΈŒ 이슈 νŽ˜μ΄μ§€μ—μ„œ 방법을 μ œμ‹œν•©λ‹ˆλ‹€.

jetifier νŒ¨ν‚€μ§€λ₯Ό μ„€μΉ˜ν•˜κ³ , μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ npm install jetifier
$ npx jetify

λ‹€μ‹œ link λͺ…령을 μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ react-native link react-native-gesture-handler

이제 μ •μƒμ μœΌλ‘œ μ‹€ν–‰λ©λ‹ˆλ‹€.

$ react-native run-android

iOS 가상μž₯μΉ˜μ—μ„œλ„ λΉŒλ“œ λ¬Έμ œκ°€ λ°œμƒν•΄μ„œ, pod 으둜 의쑴 νŒ¨ν‚€μ§€λ₯Ό λ‹€μ‹œ μ„€μΉ˜ν•˜λ„λ‘ ν•œ ν›„ μ‹€ν–‰ν•©λ‹ˆλ‹€.

$ cd ios
$ pod install
$ cd ..
$ react-native run-ios

μ •μƒμ μœΌλ‘œ μ‹€ν–‰λ©λ‹ˆλ‹€.

react native 3 2019 07 12 001

react native 3 2019 07 12 002

react native 3 2019 07 12 003