1.10.15. fejezet, ReactNative

Kapcsolódó hivatkozások

• ReactNative
• Environment setup
• ReactNavigation
• Networking
• React Native Tutorial for Beginners - Build a React Native App(youtube)
• React Native Directory
• npmjs.com
• Vysor Android/iOS képernyő tükrözés desktop-ra
• Create A React Native TypeScript Project (Youtube)
• How to reduce Android APK size in react-native

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

ANDROID_HOME=c:\Users\{USERNAME}\AppData\Local\Android\Sdk
PATH > %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator

React-Native CLI telepítése

npm i -g react-native-cli

Első lépések

Kezdő projekt létrehozása:

npx react-native init AwesomeTSProject --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