React Native migrating iOS native project

Manual integration React Native first step: Initialize react native environment

In the project we are integrating, go to the parent directory of the *.xcodeproj file, run react Native initialize command react-native init [Project Name]
Prompt will appear, enter Yes, which will generate a project with the same name in the iOS directory. The INIT process will take a little time and wait patiently.

When finished, the project file directory becomes this:

• Node_modules:react Native Dependency Package
• Ios:ios Project-related code, Xcode project files
• Android:android Project-related code
• Index.ios.js:iOS platform-Loaded JS script
• Index.android.js:Android platform-Loaded JS script
• Package.json: The configuration file for the NPM package for the current project, which reads as follows:

?

1	{ "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "name": "Project", "dependencies": { "react": "^15.1.0", "react-native": "^0.27.2" }, "version": "0.0.1" }

Next, we can get rid of the Android-related files first:

• Android
• Index.android.js
• Node_modules/react-native/android
• Node_modules/react-native/reactandroid

Step two: Add react native's libraries

Open the project with the same name in the iOS directory, and you can see the React native library referenced by this project as follows:

Open our original project, right-click the project directory, select New Group, create a new directory named libraries
Then drag the *.xcodeproj file under the previous item libraries to the libraries of the project, with the same effect.

Step three: Add React Native shell script

React native's iOS project runs a shell script at compile time, with two functions:

• A node. JS server was booted from terminal for react native debugging
• Package the React native resource file in the compiled directory

Specific ways to add:

• Select the targets build phases interface and click the + sign in the upper left corner

• Select New Run script phase to add a script and name the bundle React Native code and Images/li>
• Copy the script reference code from the project under iOS, such as. Note the path because our original *.xcodeproj file is in the same directory as Node_modules, so we're going to remove one of the two points.

Fourth step: Link the. A file and add the address of the search header file

In this step, we can kill the iOS directory, then close the original project and reopen it.
In the project build phases interface of link Binary with Libraries, click
At the bottom of the + sign, you can see a lot more in the workspace. A files, for example, add them all in.

• Next you need to add a react search header file, add a $ (srcroot)/node_modules/react-native/in targets->build Settings->header search paths React, select Recursive as shown in.

Fifth Step: Compiling

We compile first, we will find that the compilation does not pass, a pile of error.
The reason is that we haven't imported the JavaScriptCore library yet. Because react native and native interaction need to rely on javascriptcore.framework.
Compile again and find that it can be compiled successfully.

Test run React Native interface

Add the following code to the Didfinishlaunchingwithoptions: method in APPDELEGATE.M:

?

1234567891011

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                      moduleName:@"Project"                                               initialProperties:nil                                                   launchOptions:launchOptions];  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];

Cmd+r run, you will see the following interface:

React Native migrating iOS native project