7) React Native integrated into the native project (iOS)

Think for a long time, we should first introduce the practical application of a variety of components, or to introduce how to integrate the React Native to the original project good.
I think, once you start writing the various components of the application, it will take a very very long length, will make this very important content to throw away, and integrated into the original project and a lot of people need to learn (like me, ha, directly replace the existing project is not scientific, as a a set of modules in reality), so compared to the decision, or spend the first two chapters about how the interaction between React Native and JS and integrated into the original project original simple.


Since React does not assume that the rest of your technology stack – it is usually only used as a V in the MVC model – it is also easy to embed into an application that is not developed by React Native. In fact, it can be combined with many common tools, such as CocoaPods.

First, the preparation work

1 React Native development infrastructure

This can directly refer to the second articles I wrote React Native environment to build and create projects (Mac). If you have already operated in accordance with the previous article, or that has been successfully run in the Mac platform React Native applications, it must have been the development of the basic environment, you can ignore this step.

1) install Node.js
mode 1:
installation NVM (setup wizard here). Then run the command line as follows:

NVM install node & & NVM alias default node

This will default to install the latest version of the Node.js and set the command line environment variables, so you can enter the node command to start the Node.js environment. NVM allows you to install multiple versions of Node.js at the same time, and easily switch between them.
two:
first install Homebrew, and then use Homebrew to install Node.js, run the command line as follows:

Install the Home-brew /usr/bin/ruby -e / / "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) Node.js brew install node" / / installation

2) install React Native command line tool (react-native-cli)

NPM install -g react-native-cli

2 install CocoaPods

This article only use CocoaPods to install React Native way to compare the use of support, but also more simple and direct.
if you still don’t want to use CocoaPods to directly integrated friends can refer to the following two articles:
1) [iOS&amp]; Android RN learning 3 integrated into existing primary project
2) reactnative integrated into the manual set in the original IOS project into react-native

If you have already installed and used CocoaPods, please ignore this step (as long as it is believed that the development of iOS, most of them have been exposed to Kazakhstan). If
is not installed, the command is as follows:

Gem install cocoa pods / / permission not enough run the following a sudo gem install cocoapods

Two, integrated React Native

1 install React Native

1) create ReactComponent folder and configuration file

Create a folder named ReactComponent in the project, we used react-native file, and then create a package.json file that is used to initialize react-native. (custom folder name Kazakhstan) as follows:

file directory structure

7) React Native integrated into the native project (iOS)
file directory structure 1.png

Create a package.json file with the following:

{"name": "NativeRNApp", "version", "0.0.1", "private": true "scripts": {"start": "node node_modules/react-native/local-cli/cli.js start": "dependencies"}, {"react": "15.2.1", "react-native": "0.29.2"}}

Among them, name is the name of the project. Dependencies for react and react-native version information.
react-native init AwesomeProject recommends the use of the new new project will automatically create package.json, directly to the file copy, change the name as their primary project, to ensure that the react and react-native, the latest version of kazakhstan.

2) install the React Native dependent package

Run the command line in the ReactComponent directory:

NPM install

Operating results are as follows:

7) React Native integrated into the native project (iOS)
NPM install.png

Here is a lot of patience, I had to look at the console without giving up n times.
may calm down to see the cartoon back will find it just want to succeed.
really does not come back, then, if you have to create a React Native project, the inside of the node_modules copy directly to the past, there is no problem (install).

2 create index.ios.js (JS file entry)

Create a index.ios.js file in the ReactComponent folder as the JS file entry.

7) React Native integrated into the native project (iOS)
directory structure 2.png

The contents of the index.ios.js file are as follows:

React Native App / * * * Sample * https://github.com/facebook/react-native * @flow * import React {Component} from {AppRegistry'react'; import, StyleSheet, Text, View from'react-native' class NativeRNApp extends}; {render (Component) {return (< View style={styles.container}> < Text; style={styles.welcome}> Welcome; to React < /Text> < Native! Text; style={styles.instructions}> To get started, edit index.ios.js < /Text> < Text style={styles.instructions}> Press Cmd+R to reload, {'/n'} Cmd+D or shake for dev menu < /Text> < /View> const;})} ({styles = StyleSheet.create Container: {flex: 1, justifyContent:'center', alignItems:'center', backgroundColor:'#F5FCFF', welcome: {fontSize:}, 20, textAlign:'center', margin: 10, instructions: {textAlign:},'center', color:,'#333333', marginBottom: 5,},}); / / project name must have the corresponding AppRegistry.registerComponent ('NativeRNApp') (=> NativeRNApp);

3 Cocoapods integrated React Native

If the original project does not use Cocoapods, then create Podfile in the root directory. (there is a direct addition of pod related code)
directory structure is as follows:

7) React Native integrated into the native project (iOS)
directory structure 3.png

Podfile file content (to ensure that the path pair):

Platform: IOS, "7" # depends on how your project, your node_modules folder may be in other places. # please: path behind the changed to the correct path (make sure right ~ ~). Pod'React': path, =>./ReactComponent/node_modules/react-native', subspecs: "['Core','ART', =>'RCTActionSheet','RCTAdSupport','RCTGeolocation','RCTImage','RCTNetwork','RCTPushNotification','RCTSettings','RCTText','RCTVibration','RCTWebSocket','RCTLinkingIOS', #] need to rely on in the module, here is to enumerate all the modules as an example.

Then execute the pod update command in the root directory:

Pod install / * * / / / is the following treatment failure of the pod command too slow can try the following command pod install --verbose --no-repo-update pod / / install cannot download the normal solution: (or CocoaPods version: 0.39.0 the latest update method of pod --version gem sources view) --remove https://rubygems.org/ gem sources -a gem sources -l Taobao HTTPS # note #; gem if the version is too old to update gem update --system: sudo pod repo:pod repo update # update;

Effect:

7) React Native integrated into the native project (iOS)
pod install.png

Three, the original project processing

1 add ViewController to the corresponding RCTRootView

The following ReactViewController is the ViewController I created specifically for the React Native module, if necessary, can also be further encapsulated RCTRootView (do not have to reconfigure each time).
ReactViewController code is as follows:

#import "ReactViewController.h" #import < RCTRootView.h> @interface; ReactViewController (@end @implementation ReactViewController) - (void) viewDidLoad {[super viewDidLoad]; Do any additional setup after loading / the view. NSString * strUrl = @ "http://localhost:8081/index.ios.bundle? Platform=ios& dev=true; NSURL * jsCodeLocation = [NSURL URLWithString:strUrl]; RCTRootView rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation * moduleName:@ NativeRNApp initialProperties:nil launchOptions:nil]; self.view = rootView; / / can AddSubview, a custom size position - (void) didReceiveMemoryWarning} {[super didReceiveMemoryWarning]; Dispose of any resources that can / be recreated. @end}

The project structure is as follows:

7) React Native integrated into the native project (iOS)
project structure.Png

2 iOS project update App Transport Security

In a system of iOS 9 or above, the application cannot be connected to the localhost host unless explicitly specified by the HTTP protocol. We recommend that you Security as an exception to the App Transport localhost in the Info.plist file. If this is not done, the error will be encountered when attempting to connect to the server via HTTP – Could connect to development server.

Open the project in the Info.list file, add the following configuration can be:

< key> NSAppTransportSecurity< /key> < dict> < key> NSExceptionDomains< /key> < dict> < key> localhost< /key> < dict> < key> NSTemporaryExceptionAllowsInsecureHTTPLoads& lt; /key> < true/> < /dict> < /dict> < /dict>

Configuration effect is as follows:

7) React Native integrated into the native project (iOS)
Transport Security configuration.Png App

3 start the development server

Before running our project, we need to start our development server. Enter the reactnative directory, and then command line start service:

React-native start

4 run iOS project

The successful results are as follows:

7) React Native integrated into the native project (iOS)
running effect.Png

Can see the above interface, then congratulations on the success of integration. Before getting this done for one or two days, the main card in the NPM install does not come back that step, and then pod is impossible.. To write a more detailed tutorial hope that we can more easily integrate the React Native to the original project Kazakhstan, there are questions welcome message ha.

At present, the demo package to the Baidu cloud (later think of ways to GitHub):
https://pan.baidu.com/s/1hrKnlvm


How to finish React Native integrated into the original project, a plan to write React interaction between Native and native projects, then there are lot and components and other knowledge points have not written, need to adhere to long-term (slightly tired), is expected to support — O (= =) – O the

React is writing a tutorial to learn Native ing, is the side of side, the results are as follows (updated at Kazakhstan, encourage):
1)
2 React Native and React Native) to the environment and create a project (Mac)
3) React Native IDE
4) React development Native started the project with the analysis of
5 React Native JS) and React
6 based React Native) component life cycle (ES6)
7) React Native integrated into the original project (iOS)
8) communication between React Native and native
(iOS) 9) React Native UI (iOS) package of primary components