Accentsconagua

Komme i gang med en Native App-malreaktor

Kode
Share

Å designe en Reakt Native app fra begynnelsen er ofte en tungvint prosess, spesielt designdelen, fordi du må planlegge for både Android- og IOS-enheter. Ikke bare det, men du må også sørge for at appen din er fin på forskjellige skjermstørrelser. 

Det er her malene kommer til nytte. De håndterer det opprinnelige designet for deg, slik at appen ser bra ut med minimal designinnsats fra din side. Det finnes en håndfull slike maler på CodeCanyon, en markedsplass for maler og plugins. Der kan du finne forskjellige typer maler som er tilpasset den spesifikke typen app du vil opprette.

I denne veiledningen tar vi en titt på hvordan du bruker BeoStore-malen. Som navnet antyder, er BeoStore en e-handelsappmal for React Native. 

Få malen fra markedsplassen

Du kan laste ned malken ved å gå til BeoStores produktside på CodeCanyon. Det er en betalt mal, men det er verdt investeringen, fordi den har de fleste funksjonene som trengs i en e-handelsapp. Alt du trenger å gjøre er å konfigurere malen og tilpasse den til din smak. For å få en ide om hva den gir ut av boksen, er det noen av høydepunktene sine:

  • Full integrasjon med WooCommerce: Hvis du kjører et WooCommerce-nettsted, kan appen vise de samme produktene som du har på ditt eksisterende nettsted.
  • Støtte for både iOS og Android: Appen kjører og ser bra ut på både Android- og IOS-plattformer.
  • Sosiale innlogginger: kunder kan logge inn ved hjelp av deres Facebook eller Google-konto.
  • Enkel tilpasning: alt er oppdelt i komponenter. Dette sikrer at du enkelt kan tilpasse malen basert på merkevaren din.
  • Push notifications: Dette varsler automatisk kundene dine når det er en oppdatering av statusen til bestillingen deres. Du kan også sende ut varslingsvarsler for produktpromoteringer. Push notifications implementeres med Firebase.  
  • Multispråklig støtte: ut av esken får du engelsk som hovedspråket. Vietnamesisk eksisterer som et annet alternativ, men du kan også legge til ditt eget språk.
  • Sikker betalingsintegrasjon: Betalinger gjøres med PayPal.

Hvis du ikke har en Envato-konto ennå, kan du registrere deg her. Når det er gjort, logg deg på den nyopprettede kontoen din. Deretter kan du gå tilbake til BeoStore-siden og klikke på Kjøp nå knapp. 

Sette opp prosjektet

Når du har kjøpt malen, får du en nedlastingskobling til malens arkivfil. Trekk ut det og du får en CodeCanyon mappe som inneholder MStore 2.2.

MStore 2.2 er katalogen for malprosjektet. Gå videre og åpne et nytt terminalvindu i denne katalogen og utfør følgende kommando:

npm installasjon

Dette vil installere alle prosjektets avhengigheter. Dette kan ta en stund, avhengig av nedlastingshastigheten, fordi den må laste ned mange avhengigheter. Se på package.json hvis du vil se pakkene den trenger å laste ned.

Når det er gjort, er det et ekstra trinn hvis du vil bygge for iOS-enheter. Gå til iOS mappe og utfør følgende:

pod installasjon

Deretter kobler du mobilenheten til datamaskinen din til Android og utfører:

adb-enheter

Dette vil vise alle Android-enheter som er koblet til datamaskinen din. Hvis dette er første gang du kobler til enheten, bør du få en ledetekst om du vil tillate datamaskinen for USB-feilsøking. Bare trykk på ja når du får det ledeteksten.

Nå kan du kjøre appen på Android-enheten din:

reager-native run-android

For IOS:

reager-native run-ios

Hvis du ikke møtte noen feil, bør du hilses med følgende side:

For å gi deg en ide om de forskjellige sidene som er tilgjengelige i malen, er det noen få flere skjermbilder:

Feilsøking Prosjektoppsett

I denne delen har jeg samlet en liste over vanlige feil i prosjektoppsettet og deres løsninger. 

Utviklingsserver startet ikke

Hvis utviklingsserveren ikke startet automatisk når du ble utført reager-native run-android eller reager-native run-ios, Du kan manuelt kjøre den ved å kjøre:

Reager-native start

Klokken tok for lang tid å laste

Hvis du får en feil som ligner på følgende:

Feil ved å bygge DependencyGraph: Feil: Watcher tok for lang tid å laste Prøv å kjøre "watchman-versjon" fra din terminal https://facebook.github.io/watchman/docs/troubleshooting.html ved [objektobjekt] ._ onTimeout (index.js: 103: 16) på Timer.listOnTimeout (timers.js: 89: 15)

Dette skyldes at en eksisterende Watchman-forekomst kjører. Dette er en komponent av React Native Development Server. Du kan løse denne feilen og slå av Watchman ved å utføre følgende kommandoer:

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

Kunne ikke kjøre ADB Reverse

Hvis du får følgende feil:

feil: lukket Kunne ikke kjøre adb omvendt: Kommandoen mislyktes: / path / to / android-sdk-linux / sdk / plattform-verktøy / adb-s 300494a80ea22200 reverse tcp: 8081 tcp: 8081

Det betyr at Android-enheten din kjører på en versjon som er lavere enn 5.0 (Lollipop). Dette er egentlig ikke en feil. Det betyr bare at Android-enheten din ikke støtter adb omvendt, som brukes til å koble utviklingsserveren til enheten via USB-feilsøking. Hvis dette ikke er tilgjengelig, faller React Native tilbake til feilsøking ved hjelp av Wi-Fi. Du finner mer informasjon om det her: Kjører på enhet.

Noe annet kan føre til at byggingen din mislykkes. Du kan rulle opp terminalen for å se om det er noen feil som skjedde før det.

Kan ikke finne variabel _fbBatchedBridge

Hvis du får følgende feil, og utviklingsserveren kjører i Wi-Fi-modus, betyr dette at du ikke har konfigurert datamaskinens IP på din Android-enhet. (Dette kommer vanligvis bare opp med Android-enheter under versjon 5.0.)

ReferenceError: Kan ikke finne variabel: _fbBatchedBridge (linje 1 i generert bunt)

Du kan utføre følgende for å vise alternativene React Native Developer på enheten:

adb shell input keyevent 82

Å velge Dev Innstillinger fra menyen som dukker opp. Under debugging delen, trykk på Feilsøkingsserver og -port for enhet. Skriv inn den interne IP-adressen som er oppgitt av hjemmestyreren sammen med porten der utviklingsserveren kjører, og trykk OK:

YOUR_INTERNAL_IP: 8081

Gå tilbake til startskjermen til appen og kjør ut adb shell input keyevent 82 en gang til. Denne gangen velger du Last å laste appen på nytt.

Kunne ikke finne Firebase, App Compat eller GMS Play Services

Hvis du får "ikke funnet" feil, betyr dette at du ikke har installert den tilsvarende pakken ved hjelp av Android SDK Manager.

Her er pakkene som må installeres:

  • Android Support Repository
  • Android Support Library
  • Google Play-tjenester
  • Google Repository

Pass på at du også oppdaterer eksisterende pakker hvis det er en tilgjengelig oppdatering.

Andre problemer

Hvis problemet ditt ikke innebærer noen av de ovennevnte, kan du prøve følgende:

  • Sjekk ut dokumentasjonen ved feilsøking.
  • Sjekk ut kommentarene til malproduktet. Du kan søke etter feilen du får. Prøv å generalisere og forkorte feilmeldingen skjønt - ikke bare søke etter hele feilmeldingen. Hvis du ikke finner feilen, kan du prøve å stille ditt eget spørsmål i kommentar-tråden. Støtteteamet svarer vanligvis raskt.
  • Prøv å søke etter feilen på Google. Selv om resultatene du finner ikke involverer bruk av malen, vil de gi deg en ide om hvordan du løser problemet.
  • Søk på StackOverflow eller still et nytt spørsmål. Sørg for å inkludere alle nødvendige detaljer (for eksempel feilmelding, trinn som du har tatt). Det er en god artikkel om hvordan du stiller spørsmål om StackOverflow.

Tilpasse malen

Et godt sted å begynne å lære å gjøre ting i mal er dokumentasjonen:

  • Prosjektlayout: viser hvor du finner de forskjellige filene i malen og hva de er vant til.
  • Overfør WooCommerce: viser hvordan du kan koble din eksisterende WooCommerce-nettside til appen. Når du kobler appen til WooCommerce, betyr det at den vil kunne hente alle produktkategorier og produkter i WooCommerce-butikken din. 
  • Migrere tjenester: viser hvordan du konfigurerer appens navn, Firebase (for push notifications) og sosial pålogging.
  • Tilpass: Viser hvordan du tilpasser språket og temaene.

Husk å sjekke dem ut! Jeg skal ikke gjenta det som ble nevnt i dokumentasjonen. I stedet er det vi skal gjøre i denne delen å faktisk tilpasse malen slik at den ser ut som vi ønsker.

De fleste av prosjektkonfigurasjonsinnstillingene lagres inne i app / Constants.js fil. Her er noen eksempler på ting du kan endre fra denne filen:

WooCommerce Integrasjon: Nettadressen til WooCommerce-butikken brukes av appen. Som standard bruker dette mstore.io.

WordPress: Adresse: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: sant, versjon: 'wc / v1 ', timeout: 10, // forespørsel timeout RootCategoryId: 0, Produkt: Display: ProductThumbnails: width: 180, height: 216,, CatalogImages: width: 300, height: 360,, SingleProductImage: bredde: 600, høyde: 720,,,

Sosiale innlogginger: Dette implementeres ved hjelp av Auth0, en autentiseringsplattform. Som standard støtter malen bare Google og Facebook-pålogginger. Men du bør kunne legge til hvilken tjeneste Auth0 støtter.

Auth0: clientId: ", domain:",,

ikoner: Du kan bruke et hvilket som helst ikon fra Fontawesome, men du bør prefikse navnet med ios-.

Ikon: // Appens ikoner. Checkout http://fontawesome.io/icons/ for flere ikoner. Meny: 'ios-meny', Hjem: 'ios-home', Tilbake: 'ios-arrow-back', Videresend: 'ios-pil-forward', Config: 'ios-innstillinger', Mer: 'ios-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ' 'Ios-trakt-disposisjon', ShowItem: 'ios-pil-dropright', HideItem: 'ios-pil-dropup', ListMode: 'ios-list-box', GridMode: 'ios-grid', RatingFull: 'ios -star ', RatingEmpty:' ios-star-outline ', Ønskes:' ios-heart ', WishlistEmpty:' ios-heart-outline ', Slett:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'ios-cube', Nyheter: 'ios-paper', Mail: 'ios-mail', RatioOff: 'IOS-radio-knapp-av', RatioOn: 'ios-radio-button-on', Søk: 'ios -Search ', Lukk:' ios-close ', HappyFace:' ios-happy-outline ', SadFace:' ios-sad-outline ',,

Tema: Farger for de forskjellige komponentene som utgjør hver side, kan også oppdateres. For eksempel, hvis du vil endre bakgrunnsfargen, kan du oppdatere verdien for topbar:

Farge: TopBar: 'hvit', TopBarIcon: '# 283747',

Bilder: Skjermen og andre bilder kan også oppdateres ved å spesifisere en ny bane til hver av følgende:

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

Disse bildene lagres i app / bilder katalog, kan du enkelt erstatte dem hvis du ikke vil beholde de gamle bildene.

  • Du kan også endre PayPal-alternativene fra denne filen. Pass på å opprette din egen PayPal Developer-konto for å få tak i klient-ID og secretKey. Ikke glem å oppdatere sandkasse modus til falsk når du distribuerer appen din til produksjon, fordi den som standard bruker sandboksmodus, slik at ingen faktiske penger blir brukt på transaksjoner.
PayPal: clientID: ", secretKey:", sandBoxMode: true, // bytt til falsk på produksjon,
  • For å tilpasse individuelle sider må du gå til app / beholdere katalogen. Her finner du filene for hver side. Hvis du for eksempel vil tilpasse startsiden, kan du navigere til hjem mappe og åpne index.js fil. Når du åpnet, ser du at siden bruker  komponent for å gjengi hver produktkategori. Så hvis du vil legge til en generell styling for  komponent, du må oppdatere app / komponenter / ImageCard / index.js fil. Ellers kan du bare oppdatere stilene på selve siden:
this.styles = container: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), høyde: 200,, mainCategoryText: color: 'white', // endre fargen på kategorien tekst fontSize: 40 // gjøre kategorieteksten større, numberOfProductsText: color: 'white', fontSize: 15

Konklusjon

Denne opplæringen er på ingen måte en omfattende guide for hvordan du bruker BeoStore-malen. Men vi har dekket ganske mye grunnlag, spesielt på oppsettfeilsøking, som den offisielle dokumentasjonen mangler. 

Det neste trinnet er å koble denne malen opp med WooCommerce-nettstedet ditt, eller til og med repurpose det, slik at det kan brukes til andre typer apper.

Last ned malen nå, eller hvis du vil lære mer om det, kan du sjekke ut dokumentasjonen her. Du kan også finne mange flere React Native app maler på CodeCanyon.

Kode
×