React Native är en öppen källkod mobil applikation ram som skapats av Facebook. Du kan använda den för att utveckla applikationer för Android-och iOS-enheter med en enda kodbas. React Native driver några av världens mest populära appar, som Instagram och Facebook, och i det här inlägget visar jag dig hur du skapar din första React Native-app för Android.

exempel på React Native Code

React Native code för en typisk mobil app skärm ser ut så här:

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

Om du tittar noga ser du att React Native använder en kombination av JavaScript, HTML-liknande markering och CSS. Detta kodavsnitt definierar en skärm med textvisning och styling.

React Native Development Environments: Expo vs. React Native CLI

det finns två sätt att skapa en React Native app:

1. Expo CLI
2. React Native CLI

jag pratar om fördelarna och nackdelarna med var och en nedan.

Expo CLI

Expo är ett ramverk med öppen källkod och en plattform för universella React-applikationer som ger ett hanterat arbetsflöde för apputveckling. Det är en uppsättning verktyg och tjänster byggda kring React Native och native plattformar som hjälper till att utveckla, bygga, distribuera och snabbt iterera på iOS, Android och webbappar från samma JavaScript-eller TypeScript-kodbas.

Expo tar bort alla komplexiteter som är förknippade med att bygga React Native apps. Några av funktionerna i Expo CLI inkluderar:

• universella API: er som ger tillgång till funktioner som kamera, kartor, meddelanden, sensorer, Haptik och mycket mer.
• en molnbaserad Byggtjänst som ger dig App-store-färdiga binärer och hanterar certifikat.
• Over-the-air uppdateringar som låter dig uppdatera din app när som helst utan krångel och förseningar att skicka till butiken.

React Native CLI

React Native CLI är en mer grundläggande och barmetallutvecklingsmiljö. Det som är bra är att det gör det möjligt att bygga appbinarier på din egen maskin utan att förlita sig på en molntjänst. Å andra sidan är installationen mycket mer komplicerad—för att bygga appar för Android måste du installera Android Studio och konfigurera många funktioner innan du börjar. Denna process kan vara lite komplex, men React Native CLI-miljön är mer lämpad för professionella apputvecklare.

För denna handledning använder vi Expo eftersom det är det enklaste sättet att komma igång med att bygga React Native apps.

hur Expo fungerar

för att använda Expo måste du först installera Expo Client-appen, som finns tillgänglig i Play Store (en version finns också i iOS App Store). Expo Client-appen låter dig köra appen för teständamål i realtid.

Du kan koda din React Native app på din egen dator med din favoritprogrammeringstextredigerare och sedan använda Expo CLI för att testa eller publicera din app. Bakom kulisserna kommer Expo att paketera din React-kod och göra den tillgänglig för Expo Client-appen på din enhet. Du kan också använda Expo CLI för att publicera din app och göra den tillgänglig för alla med Expo-klienten, eller för att bygga en fristående version av din app som kan laddas upp till app store och köras utan att installera Expo-klienten.

skapa en App med Expo

i denna handledning använder vi Expo CLI för att skapa vår app.

förutsättningar

för att skapa en React Native app med Expo måste du uppfylla följande:

• Node.js version 12 LTS eller högre och Git på din dator
• en Android-enhet med Lollipop (Android 5) eller högre
• Expo client-applikationen installerad på din Android-enhet (ladda ner Expo client for Android från Play Store)
• en grundläggande förståelse för ReactJS eller JavaScript

Observera också att din utvecklingsdator och telefon måste vara ansluten till samma trådlösa nätverk.

ladda ner nod.JS

besök noden.js webbplats och ladda ner den senaste versionen av Node. Node är tillgängligt för Windows, macOS och Linux operativsystem. Välj bara ditt operativsystem och installera det enligt instruktionerna på webbplatsen.

för att kontrollera om nod.js är installerat, öppna ett terminalfönster och skriv:

node -v

detta kommando visar den installerade Nodversionen.

installera Expo Client

När du har installerat Node måste du också installera Expo CLI-klienten. Kör bara följande kommando:

 npm install expo-cli --global

för macOS-och Linux-användare, se till att du använder sudo.

sudo npm install expo-cli --global

ignorera eventuella varningar eller fel som uppstår vid installationen av Expo CLI. Efter en lyckad installation bör du se meddelandet nedan.

skapa en att göra-lista App med React Native

Vi skapar en enkel att göra-lista app som låter dig mata in en lista över uppgifter du behöver för att få gjort och visar dem på skärmen.

skapa ett nytt projekt med Expo

för att komma igång kör du följande Expo CLI-kommando för att skapa ett nytt projekt:

expo init tasklist

tasklist är projektets namn. Du uppmanas att välja en mall för ditt projekt. För tillfället väljer du den tomma mallen, vilket ger dig minimala beroenden.

kommandotexpo init skapar en projektmapp och installerar alla beroenden som krävs av React Native-appen.

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

navigera till projektmappen och kör följande kommando:

cd tasklist-appnpm start

npm start startar Expo dev tools och öppna en ny flik i din webbläsare som ser ut så här:

det här fönstret låter dig köra din app på en simulator eller en ansluten enhet.

Anslut en enhet

Öppna nu Expo client-appen på din fysiska Android-enhet och välj alternativet skanna QR-kod, som visas nedan.

gå sedan tillbaka till Expo dev-fönstret, skanna streckkoden och vänta tills JavaScript-paketbyggnadsprocessen är klar. Detta tar vanligtvis ett par minuter. När processen är klar ska applikationen köras på din telefon!

projektstruktur

Nu när din utvecklingsmiljö är klar kan du redigera koden för projektet med din föredragna kodredigerare. Projektmappen ser ut så här:

• tillgångar: innehåller bilderna för appen
• node_modules: innehåller alla beroenden för projektet
• App.js: håller koden som gör användargränssnittet och är en viktig fil

App.js är öppen i skärmdumpen ovan. Låt oss ta en närmare titt. Först importerar vi React från react. Vi importerar sedanText ochView komponenter frånreact-native. Vi importerar också Stylesheet, vilket hjälper till med styling.

React Native levereras med inbyggda komponenter som <Text>och <View>I motsats till vanliga HTML-komponenter, som <div>och <p>. Komponenten <View> är den mest grundläggande komponenten i React Native och används för att gruppera andra underordnade komponenter-som <div> I HTML. Komponenten<Text> används för att visa textinnehåll på skärmen—som <p> I HTML.

i standardversionen av appen.js som Expo skapar, det finns en enkel vy med en textkomponent och en statusfält. Denna vy returneras från funktionenApp()styles constant innehåller några grundläggande CSS för att formatera vyn.

nästa, låt oss lägga till några nya komponenter och stilar till appen!

skapa appen UI

Öppna appen.js-fil och ange följande 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 },});

koden ovan lägger till en enkel textinmatning och en knapp för att lägga till nya uppgifter. Vi använder CSS flexbox styling för att placera komponenterna bredvid varandra.

Lägg till händelsehantering

för att få användarinmatningen importerar vi först funktionenuseState() frånreact och använder den för att uppdatera tillståndet förnewTask() ochsetnewTask() funktioner. Eftersom användaren inte har skrivit något ännu kommer det ursprungliga tillståndet att vara tomt. Lägg till följande kod till toppen av App() – funktionen, precis ovanför return:

const = useState('');

Vi definierar sedan taskInputHandler, som lyssnar på ändringen i inmatningen och uppdaterar innehållet i funktionen setNewTask(). Lägg till dessa rader till App() funktion nästa:

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

nu registrerar vi denna inmatningshanterare medTextInput komponent. Uppdatera dinTextInput komponent så det ser ut som följande.

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

nu måste vi hantera knapptryckningar. När användaren trycker på + – knappen vill vi lägga till den nya uppgiften i en lista.

först definierar vi vårt tillstånd för listan över uppgifter:

 const = useState();

därefter definierar vi ettaddTaskHandler – funktionen för att lägga till den nya uppgiften (finns inewTask state) till listan.

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

och registrera den händelsehanteraren med<Button> komponent:

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

slutligen lägger vi till en ny vy för att visa alla uppgifter i listan vi har skapat. Detta går strax efter inmatningsbehållarvyn, men fortfarande inne i huvudbehållarvyn.

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

komplett källkod för App.js

den fullständiga koden för App.js visas nedan. Jämför det med vad du har.

 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 },});

slutsats

i den här handledningen lärde du dig hur du skapar en React Native app med Expo.

React Native är ett bra ramverk och en populär plattform för både utvecklare och företag. Appar som skapats med React Native kommer garanterat att fungera smidigt på alla plattformar eller system. React Native sparar också utvecklingsarbete genom att låta dig koda din app en gång och köra den på vilken mobil plattform som helst.

Premium Mobilappmallar från CodeCanyon

CodeCanyon är en online—marknadsplats som har hundratals mobilappmallar-för Android, iOS, React Native och Ionic. Du kan spara dagar, till och med månader, av ansträngning genom att använda en av dem.

oavsett om du precis har börjat med React Native eller är en erfaren utvecklare är en React Native app-mall ett bra sätt att spara tid och ansträngning på ditt nästa appprojekt.

Om du har problem med att bestämma vilken mall på CodeCanyon som är rätt för dig, bör dessa artiklar hjälpa dig:

• 
  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