React Native

Node.js Framework

Install

link: https://reactnative.dev/docs/0.61/getting-started

ΠŸΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€

yarn ΠΈΠ»ΠΈ npx

Usage

Create App:

npx react-native init MyTestApp [--template <Template Name>] 

Или ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ· рСпозитория

Π”Π°Π»Π΅Π΅, Π½Π°Π΄ΠΎ ΠΏΠΎΠ΄Ρ‚ΡΠ½ΡƒΡ‚ΡŒ всС зависимости: npm install ΠΈΠ»ΠΈ yarn install

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ:

npx react-native start (запускаСм ΡƒΠΏΠ°ΠΊΠΎΠ²Ρ‰ΠΈΠΊ)
npx react-native run-ios (ΠΈΠ»ΠΈ run-android; собираСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡΡ ΡƒΠΏΠ°ΠΊΠΎΠ²Ρ‰ΠΈΠΊΡƒ Π·Π° Π½ΠΎΠ²Ρ‹ΠΌ Π±Π°Π½Π΄Π»ΠΎΠΌ)

npx react-native run-android  --deviceId 64fe7667d340

МСняСм код

ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ App.js, измСняСм.

НаТимаСм R Π΄Π²Π°ΠΆΠ΄Ρ‹ ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Reload ΠΈΠ· developer Menu (cmd-M) для отобраТСния Π½Π°ΡˆΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

Tutorial - для дальнСйшСго погруТСния: https://reactnative.dev/docs/0.61/tutorial

Add some code in to existing app: https://reactnative.dev/docs/0.61/integration-with-existing-apps

Debug

ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠΊΠΈΠ½ΡƒΡ‚ΡŒ ΠΏΠΎΡ€Ρ‚: adb reverse tcp:8081 tcp:8081

МоТно с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Chrome DevTools/Safari/..

МоТно с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ React DevTools

npm install -g react-devtools
react-devtools

Π’ эмуляторС (ΠΈΠ»ΠΈ ΠΈΠ· Metro Server) - cmd-M, Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΡˆΡŒ Debug. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Π² Chrome - Debug Server (Π΄Π°, ΠΏΠΎ Π΄Π΅Ρ„ΠΎΠ»Ρ‚Ρƒ тягаСтся chrome, ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π½Π΅ смотрСл, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Safari ΠΈ Π΅Ρ‰Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ) ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π² Console ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ debuggerWorker.js элСмСнт - (ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅)

И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π² консоли Ρƒ нас доступ ΠΊ контСксту, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ React Native ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ react devtools, Ρ‚Π°ΠΌ ΠΏΠΎΠΈΠ΄Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ webview, Π½ΠΎ я ΠΏΠΎΠΊΠ° Π½Π΅ смог Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ

ΠŸΡ€ΠΈ Π΄Π΅Π±Π°Π³Π΅ ReactNative прилоТСния Π² Metro Server запускаСтся Π½Π΅ Π²ΡˆΠΈΡ‚Ρ‹ΠΉ Π² apk js-ΠΊΠΎΠ΄ (Π΅Π³ΠΎ Ρ‚Π°ΠΌ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅Ρ‚), Π° ΠΈΠ· ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ.

Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, всС console.log Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ adb logcat --pid=<pid>, Π½ΠΎ ΠΈ Ρ‡Π΅Ρ€Π΅Π· npx react-native log-android

Π›ΠΎΠ³ΠΈ

$ npx react-native log-ios
$ npx react-native log-android

Debugger Integration

Π•Ρ‰Π΅ ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΡ€ΠΎ debugger integration: https://github.com/jhen0409/react-native-debugger/blob/master/docs/debugger-integration.md

Last updated

Was this helpful?