iOS Development nested reactnative page

Recently use Reactnative to do projects, have confidence today goal to reactnative framework master, so oneself learn from each knowledge point to improve oneself bar ...

The steps are as follows:

I. Create a dependency package file (Package.json):

The React native implant process requires both React and React native two node dependency packages. We record the specific dependency package in the Package.json file.

• If the file is not in the root directory of the project, create one yourself.
• If the directory structure is beautiful, you can also create a folder in the root directory < Here I do not use sub-folders, I am too lazy .... Of course the sub-folder is better!! Place the associated reactnative file.

If you create a Package.json file yourself, terminal actions:

The CD needs to be placed under the directory (the project's root directory/ project itself created in the folder) Touch Package.json

Package.json Add the following: I'm using 0.44 here.

{  "name":"iosnestreactnative",  "version":"0.0.1",  "Private":true,  "Scripts": {    "Start":"node Node_modules/react-native/local-cli/cli.js start"  },  "Dependencies": {    "react":"16.0.0-alpha.6",    "react-native":"0.44.0"  }}

Second, install the dependent package (Node_modules):

Install the react and react native modules using NPM, the node Package Manager, Node Pack manager. These modules will be installed in the node_modules/directory under the project root directory.

CD project's root directory/ project in which you create your own folder NPM install

Wait for execution to complete. One more Node_modules folder will be in the project.

third, add react native frame (podfile):

After the react and react native modules have been successfully installed into the Node_modules directory, you can start creating Podfile to select the components you want to install into your app.

Here you need to use Cocoapods yo ... I believe this is what you should do with iOS ... Ha ha??

# # in the directory where iOS native code resides (that is, the directory where the '. Xcodeproj ' file is located) Execute: $ cd Project root directory $ pod init

To modify a profile:

# Minimum adaptation version platform:ios,"9.0"Use_frameworks!# Target's name is usually the same as your project name target'iosnestreactnative'  Do  # 'Node_modules'directories are typically located in the root directory # but if you have a different structure, then you will have to modify the following ':p Ath ' #记得此处的路径 according to the actual path, if you have to create a new folder to hold these files, precede the name of your folder:'.. /rncomponent/node_modules/react-native', if not, create it directly as follows. Pod'React',:p ath ='./node_modules/react-native',: Subspecs = [    'Core',    'Rcttext',    'rctnetwork',    'Rctwebsocket', # This module is for debugging function # Here continue to add the modules you need] # if your RN version>=0.42.0, please add the following line # This version number is the "dependencies" dictionary under "react" in Package.json .-native "behind the corresponding content pod"Yoga",:p ath ="./node_modules/react-native/reactcommon/yoga"End

Once you've created your podfile, you're ready to install react Native Pod pack.

Execute: Pod install.

Iv. Code Integration (index.ios.js file creation):

Now that we have all the dependencies ready, we can begin to modify the native code to actually implant the react native into the application.

First, create an empty index.ios.js file. In general, we put it in the same sibling directory as the Package.json above.

$ Touch Index.ios.js in the root/project folder of the CD project you created

Write the page code in the Index.ios.js file so you can!!!

'Use Strict'; import React,{component} from 'react'; import {appregistry, StyleSheet, Text, View} from 'react-native';classRnhighscores extends React.component {render () {//This is the building component using data from Xcode.     varContent = This. props['namedict'].map (Name=><text key = {name.name}>{name.name}:{name.value}{'\ n'}</text>     ); return (      <view style={styles.container}> <text style={styles.highscorestitle}>Jump over ... Hehe! </Text> <text style={styles.scores}>iOS nesting reactnative is that a success??? </Text> <text style={styles.scores}>{content}</Text> </View>    ); }}ConstStyles =stylesheet.create ({container: {flex:1, Justifycontent:'Center', Alignitems:'Center', BackgroundColor:'#FFFFFF',}, Highscorestitle: {fontSize: -, TextAlign:'Center', margin:Ten,}, scores: {textAlign:'Center', Color:'#333333', MarginBottom:5,  },});//the name of the whole JS moduleAppregistry.registercomponent ('Rnhighscores', () = Rnhighscores);

v. Initialize the configuration in the iOS project:

First look at the directory structure of my Xcode:

1> First import RCTRootView.h header file;

// #import "RCTRootView.h", after the update, you need to import the following header file.  //  comments Below are also described below, otherwise you will be prompted that the RCTRootView.h file does not exist. #import <React/RCTRootView.h>

Add code to the 2>viewdidload:

////NEXTVIEWCONTROLLER.M//iosnestreactnative////Created by think Peng on 2017/6/16.//Copyright 2017 think Peng. All rights reserved.//#import"NextViewController.h"//#import "RCTRootView.h", after the update, you need to import the following header file. //The official website comment below also has the explanation, otherwise will prompt RCTRootView.h file does not exist. #import <React/RCTRootView.h>@interface Nextviewcontroller () @end @implementation Nextviewcontroller- (void) viewdidload {[Super viewdidload];//Self.view.backgroundColor = [Uicolor graycolor];//UIView *view1 = [[UIView alloc]initwithframe:cgrectmake ( +, +, +)];//View1.backgroundcolor = [Uicolor redcolor];//[Self.view Addsubview:view1];Nsurl*jscodelocation =[Nsurl urlwithstring:@"Http://localhost:8081/index.ios.bundle?platform=ios"]; Rctrootview*rootview =[[Rctrootview alloc] initwithbundleurl:jscodelocation modulename:@"Rnhighscores"initialproperties: @{@"namedict" : @[               @{                   @"name":@"Think",                   @"value":@" Very good"                   },               @{                   @"name":@"Think Sisi",                   @"value":@"hehe"}]} Launchoptions:nil]; Self.view=Rootview;}- (void) didreceivememorywarning {[Super didreceivememorywarning]; //Dispose of any resources the can be recreated.}/*#pragma mark-navigation//in a storyboard-based application, you'll often want to do a little preparation before n avigation-(void) Prepareforsegue: (Uistoryboardsegue *) Segue Sender: (ID) Sender {//Get the new view controller using [s]    Egue Destinationviewcontroller]. Pass the selected object to the new view controller.}*/@end

Six, start the development server, Run Packager:

# Enter the path to the Node_modules folder in the root directory/project of the CD project to create your own folder $ NPM start

Note: Running the project directly will report could not the connect to Development server error, and you will need to configure app Transport Security in your project. (believe this everyone will be ~ (≧▽≦)/~)
Adding HTTP in Info.plist

<key>NSAppTransportSecurity</key>    <dict>        <key>nsallowsarbitraryloads</key >        <true/>    </dict>

Vii. Run the project in Xcode:

The results of the operation are as follows:

Done... Obl!

Demo Address: Https://github.com/PengSiSi/iOSNestReactNativeDemo

iOS Development nested reactnative page