Komma igång med en reaktiv inbyggd appmall

Att utforma en reaktion Native app från början är ofta en besvärlig process, särskilt designdelen, eftersom du måste planera både för Android och iOS-enheter. Inte bara det, men du måste också se till att din app ser bra ut på olika skärmstorlekar. 

Det är här mallar är till nytta. De hanterar den ursprungliga designen för dig så att din app ser bra ut med minimal designinsats från din sida. Det finns en handfull sådana mallar på CodeCanyon, en marknadsplats för mallar och plugins. Där kan du hitta olika typer av mallar anpassade till den specifika typen app som du vill skapa.

I den här handledningen tar vi en titt på hur man använder BeoStore-mallen. Som namnet antyder är BeoStore en e-handelsappmall för React Native. 

Hämta mallen från Marketplace

Du kan ladda ner mallen genom att gå till BeoStores produktsida på CodeCanyon. Det är en betald mall, men det är värt investeringen, eftersom den har de flesta funktioner som behövs i en e-handelsapp. Allt du behöver göra är att konfigurera mallen och anpassa den till din smak. För att få en uppfattning om vad den erbjuder ur lådan, här är några av dess höjdpunkter:

• Full integration med WooCommerce: Om du kör en WooCommerce-webbplats kan appen visa samma produkter som du har på din befintliga webbplats.
• Stöd för både iOS och Android: Appen körs och ser bra ut på både Android och iOS-plattformar.
• Sociala inloggningar: kunder kan logga in med deras Facebook eller Google-konto.
• Enkel anpassning: allt är uppdelad i komponenter. Detta säkerställer att du enkelt kan anpassa mallen baserat på ditt varumärke.
• Pushnotifikationer: Detta varnar automatiskt dina kunder när det finns en uppdatering av status för deras order. Du kan också skicka ut meddelanden om produkt för kampanjer. Push-meddelanden implementeras med Firebase.  
• Flerspråkigt stöd: ur lådan får du engelska som huvudspråket. Vietnamesiska finns som ett andra alternativ, men du kan också lägga till ditt eget språk.
• Säkra betalningsintegration: betalningar görs med PayPal.

Om du inte har ett Envato-konto än, kan du anmäla dig här. När det är klart, logga in på ditt nyskapade konto. Då kan du gå tillbaka till BeoStore-sidan och klicka på Köp nu knapp. 

Ställa in projektet

När du har köpt mallen får du en hämtningslänk till mallens arkivfil. Extrahera det och du får en CodeCanyon mapp som innehåller MStore 2,2.

MStore 2.2 är katalogen för mallprojektet. Fortsätt och öppna ett nytt terminalfönster i den katalogen och kör följande kommando:

npm installera

Det här installerar alla projektberoende. Det kan ta en stund beroende på nedladdningshastigheten, eftersom det måste ladda ner många beroenden. Ta en titt på package.json Om du vill se paketet behöver du hämta det.

När det är klart är det ytterligare ett steg om du vill bygga för iOS-enheter. Gå till iOS mapp och kör följande:

pod installera

Sedan, för Android, anslut din mobilenhet till din dator och kör:

adb-enheter

Det här listar alla Android-enheter som är anslutna till din dator. Om det här är första gången du ansluter enheten bör du få en snabb fråga om du vill tillåta datorn för USB-felsökning. Tryck bara på ja när du får det snabbt.

Nu kan du köra appen på din Android-enhet:

reagera-native run-android

För IOS:

reager-native run-ios

Om du inte stötte på några fel bör du hälsas med följande sida:

För att ge dig en bild av de olika sidorna som finns i mallen, här är några fler skärmdumpar:

Felsökning av projektinställningar

I det här avsnittet har jag sammanställt en lista över vanliga installationsfel för projektet och deras lösningar. 

Utvecklingsservern startade inte

Om utvecklingsservern inte startade automatiskt när du körde reagera-native run-android eller reager-native run-ios, du kan manuellt köra den genom att exekvera:

reagerar ursprunglig start

Vakten tog för lång tid att ladda

Om du får ett fel som liknar följande:

Fel på att bygga DependencyGraph: Fel: Watcher tog för lång tid att ladda Prova att köra "watchman version" från din terminal https://facebook.github.io/watchman/docs/troubleshooting.html vid [objektobjekt] ._ onTimeout (index.js: 103: 16) vid Timer.listOnTimeout (timers.js: 89: 15)

Detta beror på att en befintlig Watchman-instans körs. Det här är en del av React Native-utvecklingsservern. Du kan lösa detta fel och stänga Watchman genom att utföra följande kommandon:

sudo sysctl fs.inotify.max_user_instances = 99999 sudo sysctl fs.inotify.max_user_watches = 99999 sudo sysctl fs.inotify.max_queued_events = 99999 watchman shutdown-server

Kunde inte köra ADB Reverse

Om du får följande fel:

fel: stängt Kunde inte köra adb omvänd: Kommandot misslyckades: / path / to / android-sdk-linux / sdk / plattform-verktyg / adb-s 300494a80ea22200 reverse tcp: 8081 tcp: 8081

Det betyder att din Android-enhet körs på en version som är lägre än 5,0 (Lollipop). Det här är inte ett fel. Det betyder helt enkelt att din Android-enhet inte stöder adb omvänd, som används för att ansluta utvecklingsservern till enheten via USB-felsökning. Om detta inte är tillgängligt faller React Native tillbaka till felsökning med Wi-Fi. Du kan hitta mer information om det här: Running on Device.

Något annat kan orsaka att din byggnad misslyckas. Du kan bläddra upp i terminalen för att se om det finns några fel som hänt före det.

Kan inte hitta variabel _fbBatchedBridge

Om du får följande fel och utvecklingsservern körs i Wi-Fi-läge betyder det att du inte har konfigurerat datorns IP i din Android-enhet. (Detta kommer oftast bara med Android-enheter under version 5.0.)

ReferenceError: Kan inte hitta variabel: _fbBatchedBridge (rad 1 i det genererade buntet)

Du kan utföra följande för att visa alternativen React Native developer på din enhet:

adb shell input keyevent 82

Välj Dev inställningar från menyn som dyker upp. Under felsökning avsnittet, tryck på Debug-server och port för enhet. Ange den interna IP som tilldelats av din hemrouter tillsammans med porten där utvecklingsservern körs och tryck på OK:

YOUR_INTERNAL_IP: 8081

Gå tillbaka till startsidan för appen och kör adb shell input keyevent 82 igen. Den här gången välj Ladda om att ladda appen igen.

Kunde inte hitta Firebase, App Compat eller GMS Play Services

Om du får fel på "kunde inte hitta" betyder det att du inte har installerat motsvarande paket med Android SDK Manager.

Här är de paket som behöver installeras:

• Android Support Repository
• Android Support Library
• Google Play-tjänster
• Google Repository

Se till att även uppdatera befintliga paket om det finns en tillgänglig uppdatering.

Andra problem

Om ditt problem inte medför något av ovanstående kan du prova följande:

• Kolla in dokumentationen vid felsökning.
• Kolla in kommentarerna till mallprodukten. Du kan söka efter det fel du får. Försök att generalisera och förkorta felmeddelandet men - sök inte bara efter hela felmeddelandet. Om du inte hittar felet kan du försöka ställa din egen fråga i kommentarfoten. Supportteamet svarar vanligen omgående.
• Försök att söka efter felet på Google. Även om resultaten inte hittar någon användning av mallen, kommer de att ge dig en uppfattning om hur man löser problemet.
• Sök på StackOverflow eller fråga en ny fråga. Se till att inkludera alla nödvändiga detaljer (t ex felmeddelande, steg som du har tagit). Det finns en bra artikel om hur man ställer frågor om StackOverflow.

Anpassa mallen

Ett bra ställe att börja lära sig att göra saker i mallen är dess dokumentation:

• Projektlayout: visar var du hittar de olika filerna i mallen och vad de används för.
• Migrera WooCommerce: visar hur du kan ansluta din befintliga WooCommerce-webbplats till appen. Att ansluta appen till din WooCommerce innebär att den kommer att kunna hämta alla produktkategorier och produkter i din WooCommerce-butik. 
• Migrera tjänster: visar hur du konfigurerar appens namn, Firebase (för push-meddelanden) och social inloggning.
• Anpassa: visar hur man anpassar språket och teman.

Var noga med att kolla in dem! Jag kommer inte att upprepa vad som nämndes i dokumentationen. Istället är det vi ska göra i det här avsnittet att faktiskt anpassa mallen så att den ser ut som vi vill.

De flesta av projektkonfigurationsinställningarna lagras inuti app / Constants.js fil. Här är några exempel på saker som du kan ändra från den här filen:

WooCommerce Integration: Webbadressen för WooCommerce-butiken som används av appen. Som standard använder detta mstore.io.

WordPress: Adress: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, version: "wc / v1 ', timeout: 10, // request timeout RootCategoryId: 0, Produkt: Display: ProductThumbnails: width: 180, height: 216,, CatalogImages: width: 300, height: 360,, SingleProductImage: bredd: 600, höjd: 720,,,

Sociala inloggningar: Detta implementeras med Auth0, en autentiseringsplattform. Som standard stöder mallen endast Google och Facebook-inloggningar. Men du borde kunna lägga till någon tjänst som Auth0 stöder.

Auth0: clientId: ", domän:",,

ikoner: Du kan använda en ikon från Fontawesome, men du bör prefixa namnet med ios-.

Ikon: // Appens ikoner. Checkout http://fontawesome.io/icons/ för fler ikoner. Meny: 'ios-meny', Hem: 'ios-home', Tillbaka: 'Ios-Arrow-Back', Framåt: 'IOS-Arrow-forward', Config: 'IOS-inställningar', Mer: 'IOS-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ' "Ios-Track-Outline", ShowItem: "IOS-Arrow-Dropp", HideItem: "IOS-Arrow-Dropup", ListMode: "IOS-list-Box", GridMode: "Ios-Grid", RatingFull: -star ', RatingEmpty:' ios-star-outline ', Önskelista:' ios-heart ', WishlistEmpty:' ios-heart-outline ', Radera:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'Ios-Cube', Nyheter: 'Ios-Paper', Mail: 'IOS-Mail', RatioOff: 'Ios-Radio-Button-off', RatioOn: 'Ios-Radio-knappen' -sök ", Stäng:" IOS-close ", HappyFace:" IOS-happy-outline ", SadFace:" IOS-sad-outline ",,

Tema: Färger för de olika komponenterna som utgör varje sida kan också uppdateras. Om du till exempel vill ändra bakgrundsfärgen för huvudet kan du uppdatera värdet för TopBar:

Färg: TopBar: 'white', TopBarIcon: '# 283747',

Bilder: Stänkskärmen och andra bilder kan också uppdateras genom att ange en ny sökväg till var och en av följande:

Bild: Logo: kräver ('./ images / logo.png'), SplashScreen: kräver ('./ images / splash_screen.png'), CategoryPlaceholder: kräver ('./ images / category_placehodler.png'), DefaultAvatar: kräver ('./ images / default_avatar.jpg'), AvatarBackground: kräver ('./ images / avatar_background.jpg'), CheckoutStep1: kräver ('./ images / line-1.png'), CheckoutStep2: ./images/line-2.png '), CheckoutStep3: kräver (' ./ images / line-3.png '), Stripe: kräver (' ./ images / stripe.png '), PayPal: kräver ('. /images/PayPal.png '), CashOnDelivery: kräver (' ./ images / cash_on_delivery.png '), PlaceHolder: kräver (' ./bilder / placeholderImage.png '),

Dessa bilder lagras i app / bilder katalog, kan du helt enkelt ersätta dem om du inte vill behålla de gamla bilderna.

• Du kan också ändra PayPal-alternativen från den här filen. Var noga med att skapa ditt eget PayPal Developer Account för att skaffa Klient ID och hemlig nyckel. Glöm inte att uppdatera sandlådeläge till falsk när du distribuerar din app till produktion, eftersom den som standard använder sandboxläge så att inga faktiska pengar kommer att spenderas på transaktioner.

PayPal: clientID: ", secretKey:", sandBoxMode: true, // byt till falskt vid produktion,

• För att anpassa enskilda sidor måste du gå till app / behållare katalogen. Här hittar du filerna för varje sida. Om du till exempel vill anpassa hemsidan, navigerar du till Hem mapp och öppna index.js fil. När du öppnat ser du att sidan använder  komponent för att göra varje produktkategori. Så om du vill lägga till en generell styling för  komponent måste du uppdatera app / Komponenter / ImageCard / index.js fil. Annars kan du helt enkelt uppdatera stilar på själva sidan:

this.styles = container: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), höjd: 200,, mainCategoryText: color: 'white', // ändra färg på kategorin text fontSize: 40 // gör kategoritekst större, numberOfProductsText: color: 'white', fontSize: 15

Slutsats

Denna handledning är inte på något sätt en omfattande guide om hur du använder BeoStore-mallen. Men vi har täckt en hel del mark, speciellt om felsökning av installationen, vilket den officiella dokumentationen saknar. 

Nästa steg är att koppla denna mall upp med din WooCommerce-webbplats eller ens omförhandla den så att den kan användas för andra typer av appar.

Ladda ner mallen nu, eller om du vill veta mer om det, kan du kolla dokumentationen här. Du kan också hitta många fler React native appmallar på CodeCanyon.