Reactnative manually embed an existing iOS project (nth)

pre-development must have (1 and 2)

1.MAC Operating System

2. Successfully run the Reactnative project

3. Create an iOS project project called Reactnativeios

4. Create a folder rnlibrary in the corresponding directory of the project (name can be used to store reactnative components), the following figure to copy the corresponding files in

5. Open File Modify Index.ios.js file (corresponding class name to be modified to iOS project name)

Import react, {Component} from ' React ';
Import {
    appregistry,
    StyleSheet,
    Text,
    View,
} from ' react-native ';
Export default class Reactnativeios extends Component {
    render () {return
        (
            <view style={ Styles.container}>
                <text>this is a simple application.</text>
            </View>
        );
Const STYLES = stylesheet.create ({
    container: {
        flex:1,
        flexwrap: ' Wrap ',
        flexdirection: ' Row ',
        alignitems: ' Center ', flexdirection: ' column ',
        justifycontent: ' Center ',
    },
};
Appregistry.registercomponent (' Reactnativeios ', () => Reactnativeios);

6.packge.json Modify the name in the file: ' Reactnativeios, the rest is unchanged, if your version and other information are not modified

{
    ' name ': ' Reactnativeios ', '
    version ': ' 0.0.1 ',
    ' private ': true,
    ' dependencies ': {
     ' react ":" 15.3.2 ","
     react-native ":" 0.37.0 "
  }
}

7. Open Reactnativeios Project, right key new Group----I took the project name Reactnativeios (name is optional)

8. Then click Reactnativeios folder, right-click Add Files to Reactnativeios ... (For example I want to add rctactionsheet.xcodeproj)

One of the directories is different ' ... react-native/react/react.xcodeproj '

All the other catalogs are the same ... react-native/libraries/actionsheet./rctactionsheet.xcodepro ', ...

9. Then in the increase need to use commonly used such as the following figure (depending on your needs to increase the difference)

10. Add related Frameworks file next to add the relevant frameworks file to the project, Reactnativeios-> TARGETS-> reactnativeios-> build Phases-& Gt Link Binary Width Libraries

11.javascriptcore.framework. LIBSTDC++.TBD also need to join

12. Add the search header file address Reactnativeios-> TARGETS-> reactnativeios-> build Settings-> Header Search Paths, add a $ (SRC ROOT)/rnlibrary/node_modules/react-native/react, select Recursive.

，

13. Enter the other Linker Flags under Build settings Add-OBJC

14.ios9 above HTTP cannot be accessed directly, so to open the feature under Info.plist http

<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key> nstemporaryexceptionallowsinsecurehttploads</key>
            <true/>
        </dict>
    </dict>
</dict>

15. Create a UIView, name at random as shown below

#import "ReactView.h"
#import <RCTRootView.h>
#import "RCTBundleURLProvider.h"

@implementation Reactview
-(Instancetype) initWithFrame: (CGRect) frame
{
    if (self = [Super Initwithframe:frame]) {
        Nsurl *jscodelocation;
        Jscodelocation = [Nsurl urlwithstring:@ "Http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];        jscodelocation = [[Rctbundleurlprovider sharedsettings] jsbundleurlforbundleroot:@ "Index.ios" Fallbackresource:nil];
        Rctrootview *rootview = [[Rctrootview alloc] initwithbundleurl:jscodelocation modulename:@
                                                            "ReactNativeIOS"
                                                     Initialproperties:nil
                                                         Launchoptions:nil];      
        [Self addsubview:rootview];
        Rootview.frame = self.bounds;
    }
    return self;
}
@end

16. Executing code in the controller

#import "RNViewController.h"
#import "ReactView.h"

@interface rnviewcontroller ()

@end

@ Implementation Rnviewcontroller

-(void) viewdidload {
    [super viewdidload];
    Self.view.backgroundColor = [Uicolor whitecolor];
    
    Reactview * Reactview = [[Reactview alloc] Initwithframe:cgrectmake (0, Cgrectgetwidth (self.view.bounds), MB)];
    [Self.view Addsubview:reactview];
}


@end