Apples App Store är den heliga graalen för mobilutvecklare. Med React Native kan du utveckla native appar för Android och iOS med hjälp av en enda kodbas, men att få saker och ting redo för publicering kan vara knepigt, särskilt om du börjar med en applikation som ursprungligen endast är avsedd för Android.

Här börjar du med koden från ett tidigare monster Okta-blogginlägg där du utformar och publicerar en kalkylatorliknande app i Android Play store, som inkluderar autentisering via Okta.

För det här inlägget ska du först få Android-appen att fungera bra på iOS, samt lägga till en splash screen och en app-ikon. Sedan går du igenom signeringsprocessen och publicerar på App Store.

Start med att klona repo och installera alla nödvändiga bibliotek.

git clone https://github.com/oktadeveloper/okta-react-native-prime-components-examplecd okta-react-native-prime-components-examplenpm install

Från här bör du kunna säga react-native run-android för att distribuera till en emulator eller en ansluten Android-telefon. Allt bör fungera bra.

Konfigurera autentisering för din React Native iOS-app

När du nu klickar på Logga in kommer du till en Okta-inloggningssida. Denna är ansluten till ett Okta-konto som jag använde för utveckling. Du måste skapa ett eget konto och konfigurera den här appen för att använda det.

Först ska du registrera dig för ett gratis Okta-utvecklarkonto, eller logga in om du redan har ett. Navigera sedan till Applikationer > Lägg till applikation. Välj Native och klicka på Nästa. Välj ett namn och klicka på Klar. Notera din Login redirect URI och Client ID eftersom du måste lägga till dem i din app.

Nu hittar du i din App.js var konfigurationsvariabeln är definierad (nära toppen) och ändrar de relevanta värdena till de för din Okta-app:

const config = { issuer: 'https://{yourOktaDomain}/oauth2/default', clientId: '{clientId}', redirectUrl: '{redirectUrl}', additionalParameters: {}, scopes: };

Körning av din React Native-app på iOS-simulatorn

Start med att köra react-native run-ios från en Mac-dator. En iOS-simulator bör visas och i konsolen kommer ditt projekt att kompileras.

OBS: Om du får ett fel Print: Entry, ":CFBundleIdentifier", Does Not Exist finns det flera frågor på Github som spårar detta med olika förslag för att åtgärda det. Det enklaste är kanske att öppna ios/prime_components.xcodeproj i Xcode och bygga projektet därifrån.

Du bör se ett fel 'AppAuth/AppAuth.h' file not found. Du måste länka AppAuth-biblioteket till iOS. Det enklaste är med Cocoapods. Lägg in följande i ios/Podfile:

platform :ios, '11.0'target 'prime_components' do pod 'AppAuth', '>= 0.94'end

När du har installerat Cocoapods byter du till ios/ och kör pod install. Detta kommer att ta ett tag. Stäng nu Xcode och öppna ios/prime_components.xcworkspace (observera: arbetsområdet, inte projektet!) i Xcode. Pods bör visas som ett separat projekt. Välj en enhet och projektet bör byggas och köras utan problem (klicka bara på uppspelningsknappen). Du kan behöva ändra paketidentifieraren om den som används i den här handledningen redan är upptagen.

I det här läget bör faktoriseringen fungera, men om du klickar på Login kommer den att krascha eftersom din AppDelegate-klass måste överensstämma med RNAppAuthAuthorizationFlowManager. Öppna AppDelegate.h och ändra den till följande:

#import <UIKit/UIKit.h>#import "RNAppAuthAuthorizationFlowManager.h"@interface AppDelegate : UIResponder <UIApplicationDelegate, RNAppAuthAuthorizationFlowManager>@property (nonatomic, weak) id<RNAppAuthAuthorizationFlowManagerDelegate>authorizationFlowManagerDelegate;@property (nonatomic, strong) UIWindow *window;@end

Nu bör inloggningsknappen ta dig genom auktoriseringsprocessen.

Justera stilen i din React Native iOS-app

När jag körde appen var typsnittet lite stort och det såg ut som om bannern visade bakgrunden bakom appen. För att åtgärda dessa:

• In components/Button.js ändra teckensnittsstorleken till 25
• In components/Header.js ändra teckensnittsstorleken till 65
• In components/Input.js ändra flex till 1,5 och teckensnittsstorleken till 60

Det problem med transparens som uppstår i rubriken beror på att statusfältet i iOS visas. För att dölja detta importerar du StatusBar från react-native i App.js och lägger till <StatusBar hidden /> högst upp i behållaren:

return ( <Container> <StatusBar hidden />

Appen bör se korrekt ut nu.

Inställ ikonen och visningsnamnet och kör på en enhet

Som i det tidigare inlägget kan du använda en app som Iconic för att skapa en ikon (även om den är för Android). När du har en ikon kan du använda en onlinetjänst som MacAppIcon för att få alla storlekar du behöver. I Xcode öppnar du sedan prime_components-projektet och klickar på Images.xcassets. Du kommer att se alla ikoner du behöver för att fylla den – dra dem helt enkelt till rätt storlek från Finder.

Du kommer också att vilja ändra visningsnamnet för ditt projekt för att fastställa appnamnet på din enhet. Detta finns i avsnittet Identity i projektinställningarna.

Se till att du har ställt in signeringsteamet och även att Build Active Architectures Only är inställd på Yes för både debug och release, för båda projekten – Detta kan lösa många integrationsproblem med AppAuth-biblioteket.

När du är klar bör du kunna distribuera till en enhet och se en korrekt ikon och ett korrekt namn för din app.

Skapa en startskärm för din React Native iOS-app

iOS-appar har startskärmar när de laddas. React Native skapar en grundläggande LaunchScreen.dib bild som bara är en vit skärm med appens namn.

Det enklaste sättet att ändra detta är att använda React Native Toolbox.

• Skapa en kvadratisk bild på minst 2208×2208 pixlar
• Se till att ha gott om marginal runt symbolen

Till exempel:

Ett bra bildmanipuleringsprogram att använda är GIMP.

Nästan installerar du verktygslådan samt ImageMagick:

npm install -g [email protected] [email protected] install imagemagick

Placera nu din bild i ditt projekt, stäng arbetsområdet i XCode och kör följande kommando:

yo rn-toolbox:assets --splash image.png --ios