iOS項目集成react native就這幾步

時間 2019-11-07

標籤 ios 項目集成 react native 幾步欄目 iOS 简体版

原文原文鏈接

七牛的圖片在這裏竟然顯示不了... 能夠到簡書上看圖node

沒事寫個記錄, 也算是溫故而知新吧. 以下效果:react

react-native-cli和npm安裝不在本文範圍.如下react native簡稱RN.ios

如今RN也愈來愈方便了,集成進原生項目也很是簡單.就這下面幾個步驟.git

咱們有一個iOS原生項目叫 Helloworld, 是使用Cocoapods作包管理, RN也是Cocoapods接入. 目錄結構以下:github

1.建立RN

在項目目錄下建立reactnative文件夾, 在這個文件夾裏建立兩個文件index.ios.js和package.json;npm

package.json添加如下內容json

{
    "name": "Helloworld",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start"
    },
    "dependencies": {
        "react": "15.3.1",
        "react-native": "^0.33.0"
    },
    "devDependencies": {
      "babel-plugin-transform-decorators-legacy": "^1.3.4"
    }
}

index.ios.js添加如下內容react-native

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Main extends Component {
  render() {
    return (
      <View style={{backgroundColor:'yellow', flex:1, alignItems:'center', justifyContent:'center'}}>
        <Text>Hello World</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('Helloworld', () => Main);

在reactnative文件夾下用終端命令: npm installbabel

2.接RN入項目

打開項目中的Podfile文件, 添加如下內容:ide

pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
# Add any other subspecs you want to use in your project
  ]

注意 path => 後面的路徑是否正確.

在項目下執行命令: pod install

RN是以view的形式在項目中使用的, 因此再項目中新建一個控制器RNMainViewController和RNView

RNMainViewController.m

#import "RNMainViewController.h"
#import "ViewController.h"
#import "RNView.h"

@interface RNMainViewController ()

@end

@implementation RNMainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"RN模塊首頁";
    
    RNView * rnView = [[RNView alloc] initWithFrame:self.view.bounds];
    self.view = rnView;
}

@end

RNView.m

#import "RNView.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation RNView

- (instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame]) {
#if TARGET_IPHONE_SIMULATOR
        [[RCTBundleURLProvider sharedSettings] setJsLocation:@"localhost"];
#else
        [[RCTBundleURLProvider sharedSettings] setDefaults];
#endif
        NSURL *jsCodeLocation;
        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
        
        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                            moduleName:@"Helloworld"
                                                     initialProperties:nil
                                                         launchOptions:nil];
        
        [self addSubview:rootView];
        rootView.frame = self.bounds;
    }
    return self;
}

@end