React native through Cocoapods integration into existing engineering detailed

First, integration convenience

Reactnative provides an external view
Cocoapods Support Reactnative

Second, the integration needs the environment

Cocoapods-gem Install CocoaPods
Node.js-brew Install node

Third, install react with cocospod

The root directory of the project Podfile file:

platform: ios, ‘7.0’
use_frameworks!
target ‘kugou’ do
pod ‘React’
pod ‘React / RCTText’
pod ‘React / RCTWebSocket’
end
result:

4. Engineering configuration

Introduce SDK:


User HeaderSearch Paths:

 

Five, create a ReactNative page

The root JavaScript file index.ios.js:

‘Use strict’;
var React = require (‘react-native’);
var {
  Text,
  View
} = React;
var styles = React.StyleSheet.create ({
  container: {
    flex: 1,
    backgroundColor: ‘red’
  }
});
class SimpleApp extends React.Component {
  render () {
    return (
      <View style = {styles.container}>
        <Text> 111122222222222 hahahahaha application. </ Text>
      </ View>
    )
  }
}
React.AppRegistry.registerComponent (‘SimpleApp’, () => SimpleApp);
The first ‘SimpleApp’ in the last line is the module name, which will be used later

Six, the introduction of React View

#import "RCTRootView.h"

NSURL * jsCodeLocation = [NSURL URLWithString: @ "http: // localhost: 8081 / index.ios.bundle"];
        // For production use, this `NSURL` could instead point to a pre-bundled file on disk:
        //
        // NSURL * jsCodeLocation = [[NSBundle mainBundle] URLForResource: @ "main" withExtension: @ "jsbundle"];
        //
        // To generate that file, run the curl command and add the output to your main Xcode build target:
        //
        // curl http: // localhost: 8081 / index.ios.bundle -o main.jsbundle
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                                            moduleName: @ "kugou"
                                                     initialProperties: nil
                                                         launchOptions: nil];
[self addSubview: rootView];
Seven, start the development server

Because it uses its own machine as both a server and a client, the program root directory is also used as the server service root directory;

Terminal cd enters the project root directory, create a directory ReactComponent in the root directory as the execution directory of the running service, enter the command: (JS_DIR = `pwd` / ReactComponent; cd Pods / React; npm run start---root $ JS_DIR)

Eight, compile and run

Command ＋ R

Modify the js code, directly Command + R can refresh the page

Nine, version release

// OPTION 1 loaded on the server
NSURL * jsCodeLocation = [NSURL URLWithString: @ "http: // localhost: 8081 /
index.ios.bundle? platform = ios & dev = true "];
?
// OPTION 2 load locally
 NSURL * jsCodeLocation = [[NSBundle mainBundle] URLForResource: @ “testRN” withExtension: @ “jsbundle”] ;?
?
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation moduleName:
@ "AwesomeProject" initialProperties: nil launchOptions: launchOptions];
Ten, integrated performance indicators

Size: Increase 0.8M
Load Time: the first load 5s

11. Tips

Initialize RCTRootView in advance
Multiple jsbundles share one RCTRootView

React Native integrates into existing projects through cocoaPods