Existing iOS engineering integrates React Native

Existing iOS projects integrate with the general framework of RN support, iOS applications integrate with RN’s SDK, and load pre-packaged JSBundles at runtime.

The main content

The main content of the React Native component integration in existing iOS projects are:

Set the React Native dependency libraries and directory structure.
Understand the React Native components required for the project.
Use CocoaPods to add and manage these components.
Use the React Native components required for JavaScript development.
Add the React Native component container View –RCRootView
Start the React Native server and run the local project.
Verify that React Native works as expected.

preparation

1. Set the directory structure

Create a React Native project folder, such as:RNProject.
In the React Native project folderRNProjectCreated in the/iosFolder. And copy the existing project to/iosFolder.

2. Install JavaScript dependencies

Create a package.json file in the React Native project folder RNProject root directory.

{
  "name": "MyReactNativeApp"."version": "0.0.1"."private": true."scripts": {
    "start": "yarn react-native start"}}Copy the code

Open the terminal, enter the React Native project directory, and install the React and React-Native core dependencies

npm install react react-native
Copy the code

When the installation is complete, a new /node_modules folder is created in the current project directory. This file holds all the JavaScript dependency libraries needed by the current project.

Finally, add node_modules/ to the.gitignore file of the iOS project.

The directory structure at this stage is as follows:

3. Install CocoaPods

CocoaPods is a package management tool developed for iOS. Install it by yourself.

Add React Native to the App

1. Configure Cocoa Pods dependencies

Go to the React Native project ios directory and edit the Podfile file as follows: 👇🏻 reference link

require_relative '.. /node_modules/react-native/scripts/react_native_pods' require_relative '.. /node_modules/@react-native-community/cli-platform-ios/native_modules' platform :ios, '10.0' target 'RnDiffApp' do config = use_native_modules! use_react_native! ( :path => config[:reactNativePath], # to enable hermes on iOS, change `false` to `true` and then install pods :hermes_enabled => false ) target 'RnDiffAppTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. use_flipper! () post_install do |installer| react_native_post_install(installer) end endCopy the code

After editing, run the pod install command.

2. Code integration

1. Create`index.js`file

First create the index.js file in the React Native project root directory. Index. js is the starting point for React Native applications and is generally required.

Add React Native code to index.js

Open the index.js file and copy the following code into it.

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

class RNTest extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello</Text>
        <Image        
          style={styles.avatar}
          source={{uri: 'http:\ \ /patpatwebstatic.s3.us-west-2.amazonaws.com/ /origin/ /other/ /cms/ /position/ /60ab65d1b20a2.jpg'}} / >
      </View>); }}const styles = StyleSheet.create({
  container: {
    display: 'flex'.alignItems: 'center'.marginTop: 60
  },
  title: {
    fontSize: 20.textAlign: 'center'.color: '# 333'
  },
  avatar: {
    width: 300.height: 300.marginTop: 20}});// Module name
AppRegistry.registerComponent('RNTest'.() = > RNTest);
Copy the code

Use 3.`RCTRootView`Load the contents that display index.js

First, introduce the RCTRootView header file into the iOS file

#import <React/RCTRootView.h>
Copy the code

Create a click event and execute the testRNButtonAction method.

- (void)testRNButtonAction
{
        NSLog(@"RNTest Button Pressed");
        NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

        RCTRootView *rootView =
        [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                    moduleName: @"RNTest"
                             initialProperties:@{}
                                 launchOptions: nil];
        UIViewController *vc = [[UIViewController alloc] init];
        vc.view = rootView;
        [self presentViewController:vc animated:YES completion:nil];
 }
Copy the code

Test whether integration is OK

1. Add an application transportation security exception

Apple has blocked implicit explicit communication HTTP resources from loading. Therefore, you need to do some configuration in the info.plist file of the iOS project.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>
Copy the code

2. Run the package

To run the App project, first start the React Native development server. Run in the React Native project root directory:

npm start
Copy the code

The startup is successful as follows:

If the yarn command error cannot be found, install yarn and run the following command on the terminal:

npm install --global yarn
Copy the code

After the React Native service is launched, run your iOS project directly in Xcode, click the corresponding button to execute the testRNButtonAction method, and successfully load the React Native interface.

In addition, you can run your project from the command line:

npx react-native run-ios
Copy the code

Problems encountered during the configuration

No Podspec found for FBReactNativeSpec in.. /node_modules/react-native/Libraries/FBReactNativeSpec
The node related problem solving: blog.csdn.net/xinghuowuzh…

Reference links:

Integration with Existing Apps