1.10.15. fejezet, ReactNative

Beküldte pzoli - 2023, január 11 - 6:29du

Kapcsolódó hivatkozások

VS Code bővítmények

  • React Native Tools (Microsoft)
  • React-Native/React/Redux snippets
  • Prettier - Code formatter
  • Material Icon Theme
  • Gradle for Java (Microsoft)
  • Language support for Java (Red Hat)

VS Code beállítások

Automatikus formázás mentéskor

File/Preferences/Settings => format on save
(restart VS Code)

Környezeti változók

# Windows
ANDROID_HOME=c:\Users\{USERNAME}\AppData\Local\Android\Sdk
PATH > %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator
 
# Linux
.bashrc
export ANDROID_HOME=/home/USERNAME/Android/Sdk
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator

React-Native CLI telepítése

npm i -g yarn
npm i -g react-native
# alternatívák
npm i -g react-native-cli
npm i -g @react-native-community/cli

Első lépések

Kezdő projekt létrehozása:

npx react-native init AwesomeTSProject --template react-native-template-typescript
# vagy alternatíva
npx @react-native-community/cli@latest init MyApp --template react-native-template-typescript

Metro indítása

cd AwesomeTSProject
npx react-native start

Cache törlése

npm start -- --reset-cache

Projekt futtatása:

npx react-native run-android

LogCat törlése (az emulátor indítása szükséges)

adb logcat -b all -c

Hibakeresés VS Code-ban

A .vscode/launch.json ezeket tartalmazza:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "platform": "android"
        },
        {
            "name": "Run Android",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "enableDebug": false,
            "platform": "android"
        }
    ]
}

A Debug Android-ot kell indítani, majd az emulátorban Ctrl+M kombinációt kell nyomni, majd Debug menüpontot válasszuk ki. Ezután a VS Code-ban megáll a töréspontoknál a program futása.

Első alkalmazásom

HTTPRequestsApp github repo-ja.

Telepítés:

git clone https://github.com/pzoli/HTTPRequestsApp.git
cd HTTPRequestsApp
npm install
npx react-native start
npx react-native run-android

Oktatási anyagok

The Complete React Native Course 2021 : from Zero to Hero (youtube) előadás idővonala

  • 00:06:33 - Creating firs app with Expo
  • 00:15:26 - Creating native app with React Native CLI
  • 00:26:07 - Config VSCode
  • 00:35:08 - Structure and basic components
  • 00:50:56 - Using the State hook
  • 00:57:24 - Styles
  • 01:05:46 - Responsive UI with Flexbox
  • 01:13:30 - ScrollView RefreshControl
  • 01:13:30 - FlatList & SelectionList with nested array
  • 01:29:05 - TextInput & keyboard
  • 01:36:25 - Button, Touchables & Pressables
  • 01:47:41 - Alert & Toast message
  • 01:53:40 - Modal & how to create custom alert with it
  • 02:01:40 - Image and ImageBackground
  • 02:07:24 - Custom components & props
  • 02:16:18 - React Native V5 Stack navigator
  • 02:25:28 - React Native V5 Tab navigator, Material Tab at bottom & top
  • 02:38:03 - React Native V5 Drawer navigation, Side menu
  • 02:47:12 - React Native V5 passing data between screens
  • 02:51:16 - Debugging in VS Code
  • 03:02:17 - Custom fonts
  • 03:10:10 - Global styles and fonts
  • 03:15:01 - AsyncStorage
  • 03:32:31 - SQLite
  • 03:45:29 - Redux state management
  • 03:58:33 - Howto fetch data from an API using Redux
  • 04:02:10 - (fetch json data)
  • 04:06:16 - Locale and scheduled push notification
  • 04:20:55 - Push notification with Firebase - remote notification
  • 04:27:54 - Google Map
  • 04:37:15 - RN Camera with hooks
  • 04:47:16 - Testing with Jest and React test renderer
  • 04:58:09 - To-do List App
  • 06:10:23 - Generate APK & Android App bundle for Google Play Store
  • 06:22:30 - Publishing App to Google Play Store
  • 06:33:40 - How to build iOS App using Xcode