Reactnative Manual Integration Codepush-ios (part N-1) __ios

Before the integration of the MAC system must be able to run the Reactnative project, otherwise does not apply, for example, I created a project named ' Rn The following figure, the structure of the location needs to be consistent, all of the following instructions are based on this path to configure, if you need to change their own according to the structure

(1) Codepush Environment Installation and registration
1. Terminal input sudo npm install-g code-push-cli, you can install it.
After installation, enter Code-push-v view version, if you see the version represents a successful
2. Terminal Input Code-push Register, after the successful registration of an access key
3. Terminal Input Code-push login entered the key just now, the login was successful, the session file will be written in/users/your username/.code-push.config, after the default is the login status

(2) Register app in Codepush server
4. Terminal input Code-push App Add project name, actual input Code-push app add RN
5. Will generate a production and staging two key, the first is the build environment, the second is the development environment

(3) Integrated Codepush SDK----IOS

6. Terminal CD to RN directory, then install Codepush SDK, terminal input NPM install--save React-native-code-push

7. Pull the rn.xcodeproj directly into the project in the React-native-code-push folder libraries the following figure

8. Join LIBZ.TBD

9. Add $ (srcroot)/... to the header Search paths in build settings. /node_modules/react-native-code-push

10. In appdelegate such as the following figure

11. Use Code-push deployment ls--displaykeys at the command line to detect the staging value, add Info.plist to the Codepushdeploymentkey file, and populate the staging value

(3) Reactnative Code

/** * Sample react Native App * https://github.com/facebook/react-native * @flow * * Import react, {Component} from ' r
Eact '; Import {appregistry, StyleSheet, Text, View, ListView, ScrollView, Image, touchableopacit

Y, Alertios, TextInput, Dimensions,} from ' react-native ';
Imported third party import Codepush from "React-native-code-push"; Import {CreateStore} from ' Redux ' import basecomponent from '.
/base/basecomponent ';
Import Modal from ' React-native-root-modal ';

Import Toast from ' React-native-root-toast ';
var {width} = require (' Dimensions '). Get (' window ');
var {width,heigtht} = require (' Dimensions '). Get (' window ');


var width = require (' Dimensions '). Get (' window '). Width; Custom Tool class var Global = require (' ... /app/global ') var Utils = require ('. /app/utils ')//Codepush ({CheckFrequency:CodePush.CheckFrequency.MANUAL}) Export default class Codepushdemo extends
        Basecomponent {constructor () {super (); This.state = {REStartallowed:true}; } codepushstatusdidchange (syncstatus) {switch (syncstatus) {case CodePush.SyncStatus.CHECKING_F
                OR_UPDATE:this.setState ({syncmessage: "Checking for UPDATE."});
            Check to see if the break should be updated;
                Case CodePush.SyncStatus.DOWNLOADING_PACKAGE:this.setState ({syncmessage: "Downloading PACKAGE."});
            Break
                Case CodePush.SyncStatus.AWAITING_USER_ACTION:this.setState ({syncmessage: "Awaiting USER ACTION."});
            Break
                Case CodePush.SyncStatus.INSTALLING_UPDATE:this.setState ({syncmessage: "Installing UPDATE."});
            Break Case CodePush.SyncStatus.UP_TO_DATE:this.getUpdateMetadata () this.setstate ({syncmessage:
                "App up to date.", progress:false});
            Break Case CodePush.SyncStatus.UPDATE_IGNORED:this.seTstate ({syncmessage: "Update cancelled by user.", progress:false});
            Break Case CodePush.SyncStatus.UPDATE_INSTALLED:this.setState ({syncmessage: "UPDATE installed and would be appli
                Ed on restart. ", progress:false});
            Break Case CodePush.SyncStatus.UNKNOWN_ERROR:this.setState ({syncmessage: "an UNKNOWN ERROR occurred.", progress
                : false});
        Break Do you want to restart the update Toggleallowrestart () {this.state.restartAllowed?

        Codepush.disallowrestart (): Codepush.allowrestart ();
    This.setstate ({restartallowed:!this.state.restartallowed});
    ///Download Resource bundle Codepushdownloaddidprogress (Progress) {This.setstate ({progress}); }/** update is downloaded silently, and applied on restart (recommended) *//Background Update sync () {Codepush
. sync ({InstallMode:CodePush.InstallMode.IMMEDIATE,            }, This.codePushStatusDidChange.bind (this), This.codePushDownloadDidProgress.bind (this
         ),
        );  Codepush.notifyapplicationready ()//app reboot to prevent data rollback}/** Update pops a confirmation dialog, and then Reboots the App//dialog box updates syncimmediate () {Codepush.sync ({Installmode:co
                    DePush.InstallMode.IMMEDIATE, Updatedialog: {appendreleasedescription:true, 
                    Descriptionprefix: ' description ', title: ' title ', Mandatoryupdatemessage: ' Discover new version ',
                    Mandatoryupdatemessage: ' Update ', Optionalupdatemessage: ' Discover new version, Update ',
            Optionalinstallbuttonlabel: "Update", Optionalignorebuttonlabel: ' Do not update ',}
        }, This.codePushStatusDidChange.bind (this), This.codePushDownloadDidProgress.bind (this) );

        Codepush.notifyapplicationready ();//app reboot to prevent data rollback} render () {Let progressview; if (this.state.progress) {Progressview = (<text style={styles.messages}>{this.state.pr
        Ogress.receivedbytes} of {this.state.progress.totalBytes} bytes received</text>); Return (<view style={styles.container}> <text Style={styles.welco
                Me}> Welcome to codepush! </Text> <touchableopacity Onpress={this.sync.bind (this)}> <text style={ styles.syncbutton}> Click Background update </Text> </TouchableOpacity> <touchableopacity o
                Npress={this.syncimmediate.bind (This)}> <text style={styles.syncbutton}> Click on the dialog box update </Text>
           </TouchableOpacity> {Progressview}     <touchableopacity Onpress={this.getupdatemetadata.bind (this)}> <text STYLE={STYLES.SYNCB Utton}>press for Update metadata</text> </TouchableOpacity> <text style= {Styles.messages}>{this.state.syncmessage | |
    ""}</text> </View>);
                    //will display Componentwillmount () {codepush.checkforupdate (). Then (update) => {
                    if (!update) {utils.toast ("app is the newest edition");
                    else {utils.toast ("update Oh");
    }
                }
            ); } Const STYLES = Stylesheet.create ({container: {flex:1, Alignitems: "Center", background Color: "#F5FCFF", paddingtop:50}, Image: {margin:30, Width:Dimensions.get ("window"). W idth-100, height:365 * (Dimensions.get ("window"). width-100)/651,
    }, messages: {margintop:30, textAlign: "Center",}, Restarttogglebutton: {colo R: "Blue", fontsize:17}, SyncButton: {color: "green", fontsize:17}, welcome:

{fontsize:20, textAlign: "Center", Margin:20},}); Input class Module.exports = Codepushdemo

(4) Codepush Resource Pack 14. To run the project first, JS package to Xcode, Terminal CD to the RN directory (I directly to the./ios/rn/index.jsbundle)

The terminal then enters the react-native bundle--entry-file index.ios.js--platform iOS--bundle-output./ios/rn/index.jsbundle

15. Copy in

16, pack the Codepush Resource Pack Terminal CD to the RN directory, then terminal input react-native bundle--platform iOS--entry-file index.ios.js Codepush.js--dev False

17. Then in the terminal input Code-push release RN codepush.js 1.0.0 (There are pits, info.plist inside version to and this version has been able to update, is not larger than the original)

18. When each JS is created, the constructor joins

Codepush.notifyapplicationready (), to prevent rollback, I wrote a base class and then automatically calls the file every time it calls