000

background

In 2017, I wrote an article about the company giving up RN’s history of blood and tears. At that time, the company gave up because it invested too much manpower and material resources in the early stage of research, so that the first edition took too much time and failed to produce any results, so the boss stopped it. Recently, due to apple’s review issues, we have been looking for a timely update. ReactNative was chosen for its ability to combine with CodePush to achieve hot updates.

From ReactNative to Weex to the recent wave of the Flutter, it’s easy to say “MD,RN, I haven’t learned yet. Here comes the Flutter!” .

Don’t be afraid to learn. RN means to learn NodeJS, CSS, JavaScript, JSX, React, ReactNative, Native, etc.

The body of the

Today, I will mainly talk about the steps of integrating ReactNative into the existing Swift project. At the beginning, I used CocoaPods to integrate ReactNative, but I found all kinds of holes, not yoga can’t find it, glog can’t find it. It’s an error where the versions don’t match. After looking up all kinds of information on the Internet, I chose to give up and change to manual integration.

The premise is that you already have a Swift project, let’s assume the name is RNSwiftDemo, and set up the ReactNative development environment.

1. Create an empty directory

Start by creating an empty directory, called RNDemo, for your React Native project.

2. To createpackage.jsonfile

2.1 add package. Json

Create an empty file named package.json in the project root directory and fill it with the following:

{" name ":" RNSwiftDemo ", "version" : "0.0.1", "private" : true, "scripts" : {" start ": "Node node_modules/react-native/local-cli/cli.js start"}, "dependencies": {"react": "16.3.0-alpha.1", "react-native": "^ 0.54.2".}}Copy the code

In the root directory, run the following command NPM install. After executing the command, you will find a new node_modules folder in the project directory. Then run the NPM start command.


1001.png

2.2 add index. Js

Modify the index.js file as follows:

import { AppRegistry, Text, View, } from 'react-native'; import React, { Component } from 'react'; class RNHomeView extends Component{ render() { return ( <View style={{backgroundColor:'white' }}> <Text style={{fontSize:20, marginTop:200}}>Hello World! </Text> </View> ); } } class MyApp extends Component { render() { return <RNHomeView />; } } AppRegistry.registerComponent('RNSwiftDemo', () => MyApp);Copy the code

3. Configure the Swift project

**3.1 ** Copy the node_modules folder in the Rn project to the Swift project root directory as follows:


1002.png

3.2 Open the Swift project in XCode and create an RnLibs Group in the RNSwiftDemo directory

Add dependency React Native project in 3.3 RnLibs. (Different projects add different dependency libraries, need to check by yourself)

The React Native dependencies are in the node_modules/react-native/Libraries directory and the react. xcodeproj in node_modules/react-native/React

This is what happens when you add a dependency:


1003.png




1004.png

3.4 Adding a dependent Library

Select project — Targes — RNSwiftDemo — buildBuildPhases — Link Binary With Libraries


1006.png

1007.png

3.5 Adding Header Search Path


1008.png

3.6 Setting the Other Linker Flag

Search for Other Link flags in Build Settings and add -objc and -LC+ +.


1009.png

4. The Swift code

4.1 Creating a Swift and OC mixed bridge file

If the original project has rnswiftdemo-bridge-header. h similar to this file you can skip 4.1. If you don’t create an OC file in your project, XCode will prompt you to create a bridge file. Click Create and delete unnecessary OC files.


1010.png

4.2 Referencing an RN header file

Paste the following code into the bridge connector file

#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
#import "UIView+React.h"
Copy the code

4.3 Adding an RN Page

Next we are going to add a button on the home page. Click the button to jump to RN. The Controller of an RN page is called RnViewController. Now add the following code to the RnViewController

override func viewDidLoad() { super.viewDidLoad() let url = URL(string: "http://localhost:8081/index.bundle? platform=ios")! Let rootView = RCTRootView(bundleURL: url, moduleName: "RNSwiftDemo",// initialProperties: nil, launchOptions: nil ) view = rootView }Copy the code

Add the following configuration to info.plist,

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
Copy the code

5. Run

If NPM is not started, run NPM start in an RN project. Then run the iOS project and it will look like this:


1011.png

Have a problem

1. Cannot find the React header file

The React/RCTBridgeModule. H file not found is not available. The React/ rctbridgemodule.h file is not found. You can also configure and compile dependencies as follows:

1.1 Disable the parallel builds:

  • xCode menu -> Product -> Scheme -> Manage Shemes…
  • Double click on your application
  • Build tab -> clear the tick on Pallelize Build

1.2 Add react as a project dependecy

  • xCode Project Navigator -> drag React.xcodeproj from Libraries to root tree
  • Build Phases Tab -> Target Dependencies -> + -> add React

2. Undefined symbols for architecture x86_64: “STD ::terminate()”, referenced from

Xcode error while running project.

Add -LC ++ in Other Linker Flags in your Xcode project build Settings.

A. random Violation:Application project name has not been registered.

Error1: random Violation:Application Project name has not been registered.

The cause of this error is that the registry name in index.ios.js is different from the reference name in the code; The index of js

AppRegistry.registerComponent('RNSwiftDemo', () => MyApp);
Copy the code

Swift:

let rootView = RCTRootView(
    bundleURL: url,
    moduleName: "RNSwiftDemo",
    initialProperties: nil,
    launchOptions: nil
 )
Copy the code

Where to go

The author is also a ReactNative who has just started learning. After getting familiar with React and ReactNative development, I will share relevant knowledge. For more articles about iOS, iOS reverse and ReactNative, please pay attention to Weibo or wechat public account: Lecoding.