React Native to platforma aplikacji mobilnych open-source stworzona przez Facebooka. Możesz go użyć do tworzenia aplikacji na urządzenia z systemem Android i iOS z jedną bazą kodu. Facebook i Instagram, a w tym poście pokażę Ci, jak stworzyć swoją pierwszą aplikację React Native dla Androida.

przykład Reactowego kodu natywnego

Reactowy kod natywny dla typowej aplikacji mobilnej wygląda następująco:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

jeśli przyjrzysz się bliżej, zobaczysz, że React Native używa kombinacji JavaScript, znaczników podobnych do HTML i CSS. Ten fragment kodu definiuje ekran z wyświetlaczem tekstowym i stylizacją.

Środowiska programistyczne React Native: Expo vs.React Native Cli

istnieją dwa sposoby tworzenia aplikacji React Native:

1. Expo Cli
2. React Native Cli

opowiem o zaletach i wadach każdego z nich poniżej.

Expo CLI

Expo to framework open-source i platforma dla uniwersalnych aplikacji Reactowych, która zapewnia zarządzany przepływ pracy nad tworzeniem aplikacji. Jest to zestaw narzędzi i usług opartych na platformach React Native i natywnych, które pomagają tworzyć, budować, wdrażać i szybko iterować w systemach iOS, Android i aplikacjach internetowych z tej samej bazy kodu JavaScript lub maszynopisu.

Expo usuwa wszystkie zawiłości związane z tworzeniem natywnych aplikacji Reactowych. Niektóre z funkcji Expo CLI obejmują:

• uniwersalne API, które zapewniają dostęp do funkcji takich jak kamera, mapy, powiadomienia, czujniki, haptyki i wiele innych.
• usługa kompilacji oparta na chmurze, która udostępnia gotowe do App-store pliki binarne i obsługuje certyfikaty.
• aktualizacje bezprzewodowe, które umożliwiają aktualizację aplikacji w dowolnym momencie bez kłopotów i opóźnień związanych z przesyłaniem do sklepu.

React Native CLI

React Native CLI jest bardziej podstawowym środowiskiem programistycznym. Dobrą rzeczą jest to, że umożliwia tworzenie plików binarnych aplikacji na własnym komputerze, bez polegania na usłudze w chmurze. Z drugiej strony konfiguracja jest znacznie bardziej skomplikowana-aby zbudować aplikacje na Androida, musisz zainstalować Android Studio i skonfigurować wiele funkcji przed rozpoczęciem. Proces ten może być nieco skomplikowany, ale React natywne środowisko CLI jest bardziej odpowiednie dla profesjonalnych programistów aplikacji.

w tym samouczku użyjemy Expo, ponieważ jest to najprostszy sposób na rozpoczęcie tworzenia natywnych aplikacji Reactowych.

Jak działa Expo

aby korzystać z Expo, musisz najpierw zainstalować aplikację klienta Expo, która jest dostępna w Sklepie Play (wersja jest również dostępna w sklepie iOS App Store). Aplikacja Expo Client umożliwia uruchamianie aplikacji do celów testowych w czasie rzeczywistym.

możesz kodować swoją aplikację React natywną na swoim komputerze za pomocą ulubionego programistycznego edytora tekstu, a następnie użyć Expo CLI do przetestowania lub opublikowania aplikacji. Za kulisami Expo zapakuje Twój rodzimy Kod Reactowy i udostępni go aplikacji klienckiej Expo na Twoim urządzeniu. Możesz także użyć Expo CLI do opublikowania aplikacji i udostępnienia jej każdemu, kto ma Klienta Expo, lub do zbudowania samodzielnej wersji aplikacji, którą można przesłać do App store i uruchomić bez instalowania klienta Expo.

Tworzenie aplikacji za pomocą Expo

w tym samouczku użyjemy Expo CLI do utworzenia naszej aplikacji.

wymagania wstępne

aby utworzyć natywną aplikację Reactową w Expo, musisz spełnić następujące wymagania:

• węzeł.js w wersji 12 LTS lub wyższej i Git na komputerze
• urządzenie z Androidem z Lollipop (Android 5) lub nowszym
• aplikacja Expo Client zainstalowana na urządzeniu z Androidem (pobierz klienta Expo dla Androida ze Sklepu Play)
• podstawowa znajomość ReactJS lub JavaScript

należy również pamiętać, że komputer programistyczny i telefon muszą być podłączone do tej samej sieci bezprzewodowej.

Pobierz węzeł.js

odwiedź węzeł.strona js i pobierz najnowszą wersję Node. Node jest dostępny dla systemów operacyjnych Windows, macOS i Linux. Wystarczy wybrać system operacyjny i zainstalować go zgodnie z instrukcjami dostępnymi na stronie.

aby sprawdzić, czy węzeł.JS jest zainstalowany, otwórz okno terminala i wpisz:

node -v

To polecenie wyświetli zainstalowaną wersję węzła.

zainstaluj klienta Expo

Po zainstalowaniu węzła, będziesz musiał również zainstalować klienta Expo CLI. Po prostu uruchom następujące polecenie:

 npm install expo-cli --global

dla użytkowników macOS i Linux, upewnij się, że używaszsudo.

sudo npm install expo-cli --global

Ignoruj wszelkie ostrzeżenia lub błędy, które występują podczas instalacji Expo CLI. Po pomyślnej instalacji powinieneś zobaczyć poniższy komunikat.

Utwórz listę zadań z Reactowym natywnym

stworzymy prostą aplikację do listy zadań, która pozwoli Ci wprowadzić listę zadań, które musisz wykonać, i wyświetli je na ekranie.

Utwórz nowy projekt za pomocą Expo

aby rozpocząć, uruchom następujące polecenie Expo CLI, aby utworzyć nowy projekt:

expo init tasklist

tasklist to nazwa projektu. Zostaniesz poproszony o wybranie szablonu dla Twojego projektu. Na razie wybierz pusty szablon, który zapewnia minimalne zależności.

polecenie expo init tworzy folder projektu i instaluje wszystkie zależności wymagane przez natywną aplikację Reactową.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

przejdź do folderu projektu i uruchom następujące polecenie:

cd tasklist-appnpm start

npm start rozpocznie Expo dev tools i otwórz nową kartę w przeglądarce, która wygląda następująco:

to okno pozwala uruchomić aplikację na symulatorze lub podłączonym urządzeniu.

podłącz urządzenie

teraz otwórz aplikację Expo client na fizycznym urządzeniu z Androidem i wybierz opcję Skanuj kod QR, jak pokazano poniżej.

następnie wróć do okna programistycznego Expo, zeskanuj kod kreskowy i poczekaj na zakończenie procesu tworzenia pakietu JavaScript. Zwykle zajmuje to kilka minut. Po zakończeniu procesu aplikacja powinna być uruchomiona na Twoim telefonie!

struktura projektu

teraz, gdy środowisko programistyczne jest gotowe, możesz edytować kod projektu za pomocą preferowanego edytora kodu. Folder projektu wygląda mniej więcej tak:

• aktywa: przechowuje obrazy dla aplikacji
• node_modules: zawiera wszystkie zależności dla projektu
• aplikacja.js: przechowuje kod renderujący interfejs użytkownika i jest niezbędnym plikiem

.js jest otwarty na powyższym zrzucie ekranu. Przyjrzyjmy się bliżej. Najpierw importujemyReact zreact. Następnie importujemy komponentyText IView zreact-native. Importujemy również Stylesheet, co pomaga w stylizacji.

React Native zawiera wbudowane komponenty, takie jak <Text> I <View>, w przeciwieństwie do standardowych komponentów HTML, takich jak <div>I <p>. Komponent<View> jest najbardziej podstawowym komponentem w React Native i służy do grupowania innych komponentów potomnych—takich jak<div> w HTML. Komponent<Text> służy do wyświetlania treści tekstowej na ekranie—podobnie jak<p> w HTML.

w wersji boilerplate aplikacji.JS, który tworzy Expo, jest prosty widok z komponentem tekstowym i paskiem stanu. Widok ten jest zwracany z funkcjiApp(). Stałastyles zawiera kilka podstawowych CSS do stylizacji widoku.

następnie dodajmy nowe komponenty i style do aplikacji!

Utwórz interfejs aplikacji

Otwórz aplikację.plik js i wprowadź następujący kod.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

powyższy kod dodaje proste wprowadzanie tekstu i przycisk do dodawania nowych zadań. Używamy stylizacji CSS flexbox do pozycjonowania komponentów obok siebie.

Dodaj obsługę zdarzeń

aby uzyskać dane wejściowe użytkownika, najpierw importujemy funkcjęuseState() zreact I używamy jej do aktualizacji stanunewTask() IsetnewTask() funkcje. Ponieważ użytkownik jeszcze nic nie wpisał, stan początkowy będzie pusty. Dodaj następujący kod na górze funkcji App(), tuż nad return:

const = useState('');

definiujemy taskInputHandler, który nasłuchuje zmiany wejścia i aktualizuje dane wejściowe.zawartość funkcji setNewTask(). Dodaj te linie do funkcjiApp() następny:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

teraz rejestrujemy tę obsługę wprowadzania za pomocą komponentuTextInput. Zaktualizuj komponentTextInput, aby wyglądał następująco.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

teraz musimy obsługiwać naciśnięcia przycisków. Gdy użytkownik naciśnie przycisk+, chcemy dodać nowe zadanie do listy.

najpierw zdefiniujemy nasz stan dla listy zadań:

 const = useState();

następnie zdefiniujemy funkcjęaddTaskHandler, aby dodać nowe zadanie (Znalezione wnewTask stan) do listy.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

i zarejestrować obsługę zdarzenia za pomocą komponentu <Button> :

 <Button title = "+" onPress = {addTaskHandler} />

na koniec dodamy nowy widok, aby pokazać wszystkie zadania z listy, którą stworzyliśmy. Dzieje się to tuż po widoku kontenera wejściowego, ale nadal wewnątrz głównego widoku kontenera.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

kompletny kod źródłowy aplikacji.js

Pełny kod dla aplikacji.js jest pokazany poniżej. Porównaj to z tym, co masz.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

podsumowanie

w tym samouczku nauczyłeś się jak stworzyć natywną aplikację Reactową z Expo.

React Native to świetny framework i popularna platforma zarówno dla programistów, jak i firm. Aplikacje stworzone przy użyciu React Native gwarantują płynną pracę na każdej platformie lub systemie. React Native oszczędza również pracę programistyczną, pozwalając na kodowanie aplikacji raz i uruchamianie jej na dowolnej platformie mobilnej.

Premium Szablony Aplikacji Mobilnych od CodeCanyon

CodeCanyon to internetowy rynek, który ma setki szablonów aplikacji mobilnych—dla Androida, iOS, React Native i Ionic. Możesz zaoszczędzić dni, a nawet miesiące wysiłku, używając jednego z nich.

niezależnie od tego, czy dopiero zaczynasz pracę z React Native, czy jesteś doświadczonym programistą, szablon aplikacji React Native to świetny sposób na zaoszczędzenie czasu i wysiłku przy następnym projekcie aplikacji.

Jeśli masz problem z podjęciem decyzji, który szablon na CodeCanyon jest odpowiedni dla Ciebie, te artykuły powinny pomóc:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas