Tôi chỉ làm cho toàn bộ quá trình với sự khởi đầu từ dự án Xcode sạch. Thông thường tôi đơn giản tạo ra ứng dụng RN, đẩy ra và sau đó dịch sang phần cocoapods ios. Phần lớn dựa trên tài liệu RN: http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html
Vì vậy, môi trường: macOS Sierra, Xcode 9.2, RN 0.51.0
Tên dự án: MyApp
Chuẩn bị
- Tạo dự án Xcode mới, từ mẫu 'Độc Xem App', tên sản phẩm "MyApp", ngôn ngữ Objective-C
- Run, xem nó làm việc
cd MyApp, mkdir ios, mv MyApp* ios (di chuyển tất cả các file liên quan đến ios ios thư mục con)
Install NPM phụ thuộc
Tạo package.json trong thư mục gốc của bạn dự án (rất cơ bản)
{
"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 (Tạo Podfile)- tuyên bố phản ứng phụ thuộc vào Podfile trong MyApp nhắm mục tiêu
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'
Bạn có thể thêm/xóa Phản ứng subspecs để bao gồm/loại bỏ chức năng RN, đây là quá trình khó khăn vì các thành phần RN không hoàn toàn độc lập.
pod install (tích hợp vỏ vào dự án, sẽ tạo MyApp.xcworkspace, nó nên được sử dụng để biên dịch ứng dụng)open MyApp.xcworkspace, xây dựng & chạy, ứng dụng vẫn nên làm việc
Nhúng RN Root Xem
Thay thế bạn AppDelegate.m bằng đoạn mã sau:
#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
- Thêm ATS ngoại lệ đối với Info.plist (hoặc MyApp sẽ không thể kết nối với máy chủ đóng gói bằng http)
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
- Compile & chạy trong Simulator, bạn sẽ thấy màn hình màu đỏ với thông điệp "Không có URL gói nào."(Đó là vì không có máy chủ đóng gói chạy & không jsbundle biên soạn tồn tại)
Javascript phần
Tạo MyApp/index.js với mã này (nó là từ RN mẫu):
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp',() => App);
Tạo 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,
},
});
- bắt đầu đóng gói
npm start từ thư mục dự án gốc (MyApp)
- chạy ứng dụng từ xcode, bạn sẽ thấy chỉ số tải và sau đó RN trả lại màn hình với "Welcome to Phản ứng Native!"
Packager
- Bạn cũng nên thêm bước xây dựng của trình đóng gói để nhúng các js đã biên dịch vào gói ứng dụng
main.jsbundle để nó có thể chạy mà không cần máy chủ đóng gói.
Add script bước để MyApp nhắm mục tiêu của giai đoạn xây dựng với nội dung này:
export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh
này bước công trình đối với tôi.