Share
Het zelf ontwerpen van een React Native-app is vaak een omslachtig proces, vooral het ontwerpgedeelte, omdat je zowel voor Android- als iOS-apparaten moet plannen. En dat niet alleen, maar u moet ook zorgen dat uw app er op verschillende schermformaten mooi uitziet.
Dit is waar sjablonen van pas komen. Ze behandelen het oorspronkelijke ontwerp voor u, zodat uw app er mooi uitziet met minimale ontwerpinspanning van uw kant. Er zijn een handvol van dergelijke sjablonen bij CodeCanyon, een marktplaats voor sjablonen en plug-ins. Daar kunt u verschillende soorten sjablonen vinden die zijn afgestemd op het specifieke type app dat u wilt maken.
In deze zelfstudie bekijken we hoe u de BeoStore-sjabloon gebruikt. Zoals de naam al doet vermoeden, is de BeoStore een e-commerce-appsjabloon voor React Native.
U kunt de sjabloon downloaden door naar de BeoStore-productpagina op CodeCanyon te gaan. Het is een betaalde sjabloon, maar het is de investering waard, omdat het de meeste functies heeft die nodig zijn in een e-commerce app. Het enige dat u hoeft te doen, is de sjabloon configureren en naar wens aanpassen. Om een idee te krijgen wat het out-of-the-box biedt, zijn hier enkele van de hoogtepunten:
Als je nog geen Envato-account hebt, kun je je hier aanmelden. Zodra dat is gebeurd, meldt u zich aan bij uw nieuw gemaakte account. Daarna kunt u teruggaan naar de BeoStore-pagina en klikken op de Koop nu knop.
Nadat u de sjabloon hebt gekocht, krijgt u een downloadkoppeling naar het archiefbestand van de sjabloon. Pak dat uit en je krijgt een CodeCanyon map die bevat Mstore 2.2.
MStore 2.2 is de map voor het sjabloonproject. Ga je gang en open een nieuw terminalvenster in die map en voer de volgende opdracht uit:
npm installeren
Hiermee installeert u alle projectafhankelijkheden. Dit kan een tijdje duren, afhankelijk van uw downloadsnelheid, omdat het veel afhankelijkheden moet downloaden. Kijk eens naar package.json als je de pakketten wilt zien die het moet downloaden.
Zodra dat is gebeurd, is er een extra stap als u wilt bouwen voor iOS-apparaten. Ga naar de iOS map en voer het volgende uit:
pod installeren
Vervolgens verbindt u voor Android uw mobiele apparaat met uw computer en voert u het volgende uit:
adb-apparaten
Hiermee worden alle Android-apparaten weergegeven die op uw computer zijn aangesloten. Als dit de eerste keer is dat u het apparaat aansluit, wordt u gevraagd of u de computer wilt toestaan voor USB-foutopsporing. Tik gewoon op Ja zodra je die prompt krijgt.
Nu kunt u de app op uw Android-apparaat uitvoeren:
react-native run-android
Voor iOS:
react-native run-ios
Als u geen fouten tegenkomt, moet u worden begroet met de volgende pagina:
Om u een idee te geven van de verschillende pagina's die beschikbaar zijn in de sjabloon, volgen hier nog enkele screenshots:
In deze sectie heb ik een lijst samengesteld met veelvoorkomende fouten in de installatie van het project en hun oplossingen.
Als de ontwikkelserver niet automatisch is gestart toen u deze uitvoerde react-native run-android of react-native run-ios, je kunt het handmatig uitvoeren door het volgende uit te voeren:
react native start
Als u een foutmelding krijgt die lijkt op het volgende:
Fout bij opbouw van DependencyGraph: Fout: Watcher duurde te lang om te laden Probeer 'watchman-versie' uit te voeren vanaf uw terminal https://facebook.github.io/watchman/docs/troubleshooting.html bij [object Object] ._ onTimeout (index.js: 103: 16) op Timer.listOnTimeout (timers.js: 89: 15)
Dit komt omdat een bestaande Watchman-instantie wordt uitgevoerd. Dit is een onderdeel van de React Native ontwikkelingsserver. U kunt deze fout oplossen en Watchman afsluiten door de volgende opdrachten uit te voeren:
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
Als u de volgende foutmelding krijgt:
error: closed Kan adb reverse niet uitvoeren: opdracht mislukt: / pad / naar / android-sdk-linux / sdk / platform-tools / adb -s 300494a80ea22200 reverse tcp: 8081 tcp: 8081
Dit betekent dat uw Android-apparaat wordt uitgevoerd op een versie die lager is dan 5,0 (Lollipop). Dit is eigenlijk geen fout. Het betekent gewoon dat uw Android-apparaat dit niet ondersteunt adb omgekeerd, die wordt gebruikt om de ontwikkelserver met uw apparaat te verbinden via USB-foutopsporing. Als dit niet beschikbaar is, valt React Native terug op foutopsporing met behulp van Wi-Fi. U kunt hier meer informatie over vinden: Running on Device.
Iets anders kan ervoor zorgen dat je build mislukt. U kunt omhoog bladeren door de terminal om te zien of er eerder fouten zijn opgetreden.
Accentsconagua
_fbBatchedBridge Als u de volgende foutmelding krijgt en de ontwikkelserver wordt uitgevoerd in de Wi-Fi-modus, betekent dit dat u het IP-adres van uw computer niet hebt ingesteld op uw Android-apparaat. (Meestal komt dit alleen met Android-apparaten onder versie 5.0.)
ReferenceError: variabele kan niet gevonden worden: _fbBatchedBridge (regel 1 in de gegenereerde bundel)
U kunt het volgende uitvoeren om de opties voor de React Native ontwikkelaar op uw apparaat weer te geven:
adb shell input keyevent 82
kiezen Dev-instellingen uit het menu dat verschijnt. Onder de debugging sectie, tik op Foutopsporing serverhost & poort voor apparaat. Voer het interne IP-adres in dat door uw thuisrouter is toegewezen, samen met de poort waarop de ontwikkelserver draait en druk op OK:
YOUR_INTERNAL_IP: 8081
Ga terug naar het startscherm van de app en voer het uit adb shell input keyevent 82 nog een keer. Deze keer selecteren vernieuwen om de app opnieuw te laden.
Als u "could not find" -fouten krijgt, betekent dit dat u het bijbehorende pakket niet hebt geïnstalleerd met behulp van de Android SDK Manager.
Dit zijn de pakketten die moeten worden geïnstalleerd:
Zorg ervoor dat u ook bestaande pakketten bijwerkt als er een beschikbare update is.
Als uw probleem niets met het bovenstaande te maken heeft, kunt u het volgende proberen:
Een goede plek om te beginnen met het leren hoe dingen in de sjabloon te doen is de documentatie:
Zorg ervoor dat je die bekijkt! Ik ga niet herhalen wat er in de documentatie staat. Wat we in dit gedeelte gaan doen, is eigenlijk om de sjabloon aan te passen zodat het eruit ziet zoals we het willen.
De meeste configuratie-instellingen van het project worden opgeslagen in de app / Constants.js het dossier. Hier zijn enkele voorbeelden van dingen die u uit dit bestand kunt wijzigen:
WooCommerce-integratie: De URL van de WooCommerce-winkel die wordt gebruikt door de app. Standaard wordt hiervoor mstore.io gebruikt.
WordPress: Address: 'http://mstore.io/api',, WooCommerce: url: 'http://mstore.io', consumerKey: ", consumerSecret:", wp_api: true, version: 'wc / v1 ', time-out: 10, // request timeout RootCategoryId: 0, Product: Weergave: ProductThumbnails: width: 180, height: 216,, CatalogImages: width: 300, height: 360,, SingleProductImage: width: 600, height: 720,,,
Sociale logins: Dit wordt geïmplementeerd met Auth0, een authenticatieplatform. Standaard ondersteunt de sjabloon alleen Google en Facebook-aanmeldingen. Maar je zou in staat moeten zijn elke dienst toe te voegen die Auth0 ondersteunt.
Auth0: clientId: ", domein:",,
Icons: U kunt elk pictogram van Fontawesome gebruiken, maar u moet de naam voorafvoegen met ios-.
Icoon: Pictogrammen van / / app. Check http://fontawesome.io/icons/ voor meer pictogrammen. Menu: 'ios-menu', Home: 'ios-home', Terug: 'ios-arrow-back', Doorsturen: 'ios-arrow-forward', Config: 'ios-settings', Meer: 'ios-more ', SignIn:' ios-log-in ', SignOut:' ios-log-out ', ShoppingCart:' ios-cart ', ShoppingCartEmpty:' ios-cart-outline ', Sorteren:' ios-funnel ', Filter: 'ios-trechter-overzicht', ShowItem: 'ios-arrow-dropright', HideItem: 'ios-arrow-dropup', ListMode: 'ios-list-box', GridMode: 'ios-grid', RatingFull: 'ios -star ', RatingEmpty:' ios-star-outline ', Wishlist:' ios-heart ', WishlistEmpty:' ios-heart-outline ', Verwijderen:' ios-trash ', AddToCart:' ios-cart ', MyOrder: 'ios-cube', Nieuws: 'ios-paper', Mail: 'ios-mail', RatioOff: 'ios-radio-button-off', RatioOn: 'ios-radio-button-on', Zoeken: 'ios -search ', Close:' ios-close ', HappyFace:' ios-happy-outline ', SadFace:' ios-sad-outline ',,
Thema: Kleuren voor de verschillende componenten waaruit elke pagina bestaat, kunnen ook worden bijgewerkt. Als u bijvoorbeeld de achtergrondkleur van de koptekst wilt wijzigen, kunt u de waarde bijwerken voor Bovenste balk:
Kleur: TopBar: 'white', TopBarIcon: '# 283747',
Afbeeldingen: Het opstartscherm en andere afbeeldingen kunnen ook worden bijgewerkt door een nieuw pad op te geven voor elk van de volgende:
Afbeelding: Logo: require ('./ images / logo.png'), SplashScreen: require ('./ images / splash_screen.png'), CategoryPlaceholder: require ('./ images / category_placehodler.png'), DefaultAvatar: require ('./ images / default_avatar.jpg'), AvatarBackground: require ('./ images / avatar_background.jpg'), CheckoutStep1: require ('./ images / line-1.png'), CheckoutStep2: require (' ./images/line-2.png '), CheckoutStep3: require (' ./ images / line-3.png '), Stripe: require (' ./ images / stripe.png '), PayPal: require ('. /images/PayPal.png '), CashOnDelivery: require (' ./ images / cash_on_delivery.png '), PlaceHolder: require (' ./ images / placeholderImage.png '),,Deze afbeeldingen worden opgeslagen in de app / images map, kunt u deze eenvoudigweg vervangen als u de oude afbeeldingen niet wilt behouden.
klant identificatie en geheime sleutel. Vergeet niet om te updaten sandBoxMode naar vals wanneer u uw app implementeert voor productie, omdat deze standaard de sandbox-modus gebruikt, zodat er geen echt geld aan transacties wordt uitgegeven.PayPal: clientID: ", secretKey:", sandBoxMode: true, // change to false on production,
this.styles = container: flex: 1, imageCard: width: Constants.Dimension.ScreenWidth (1), height: 200,, mainCategoryText: color: 'white', // wijzig de kleur van de categorie text fontSize: 40 // maak de categorietekst groter, numberOfProductsText: color: 'white', fontSize: 15
Deze zelfstudie is geenszins een uitgebreide handleiding voor het gebruik van de BeoStore-sjabloon. Maar we hebben nogal wat terrein afgedekt, vooral bij het oplossen van problemen met de installatie, wat de officiële documentatie ontbeert.
De volgende stap is om deze sjabloon aan uw WooCommerce-website te koppelen of deze zelfs opnieuw te gebruiken zodat deze voor andere soorten apps kan worden gebruikt.
Download de sjabloon nu of als u er meer over wilt weten, kunt u hier de documentatie bekijken. Je kunt ook veel meer React Native app-sjablonen vinden op CodeCanyon.
