Właśnie uczynić cały proces od początku z czystym projektu Xcode. Zwykle po prostu tworzę aplikację RN, wyrzucam, a następnie tłumaczę na cocoapods ios part. To w dużej mierze oparte na dokumentach RN: http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html
Tak więc środowisko: macOS Sierra, Xcode 9.2, RN 0.51.0
Nazwa projektu: MojaApl
Przygotuj
- Tworzenie nowego projektu Xcode, z szablonu 'Widok pojedynczy app', nazwa produktu "MojaApl", języka Objective-C
- Uruchom go zobaczyć działa
cd MyApp, mkdir ios, mv MyApp* ios (przeniesienie wszystkich plików związanych z iOS do iOS podfolderze)
zainstalować zależności KMP
Tworzenie package.json w folderze głównym projekcji (bardzo podstawowy)
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0"
}
}
Run npm install
Seup cocoapods
cd iospod init (Generować Podfile)- stwierdzenie, reaguje w zależności Podfile w MojaApl cel
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge',
'RCTAnimation',
'RCTBlob',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
'RCTImage',
'RCTLinkingIOS',
'DevSupport',
]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
można dodawania/usuwania React subspecs włączenie/usuwania funkcjonalność RN, jest trudne, ponieważ proces RN składniki nie są w pełni niezależne.
pod install (zintegrować strąków w projekt, stworzy MyApp.xcworkspace, powinno być wykorzystane do opracowania aplikacji)open MyApp.xcworkspace, budować & bieg, aplikacja powinna nadal działać
HTML RN Korzeń View
Wymień ty AppDelegate.m z tym fragmencie:
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings];
NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
#if RCT_DEV
[bridge moduleForClass:[RCTDevLoadingView class]];
#endif
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end
- Dodaj wyjątek ATS do Info.plist (lub MojaApl nie będzie w stanie połączyć się z serwerem HTTP) pakującego z
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
- kompilacji & metę w symulatorze, zobaczysz czerwony ekran z komunikatem "Brak adresu URL pakietu."(To dlatego, że żaden serwer Packager działa & nie skompilowany jsbundle istnieje)
obsługa JavaScript part
Tworzenie MyApp/index.js z tego kodu (to jest od RN szablonu):
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp',() => App);
Tworzenie MyApp/App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
- rozpocząć Packager
npm start z katalogu głównego projektu (MyApp)
- uruchamiania aplikacji z Xcode, powinieneś zobaczyć wskaźnik ładowania, a następnie RN ekran wykonane z "Welcome to React Native!"
Packager
- Powinieneś także dodać kompilator pakietu pakującego, aby osadzić skompilowane js w pakiecie aplikacji
main.jsbundle, aby mógł być uruchamiany bez serwera programisty pakera.
krok dodawania skryptu MojaApl docelowego Budowanie fazy z tej treści:
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
Ten kroki pracuje dla mnie.