React native build IOS development environment _ios

First, write in front

1. What is React-native?

React-native: Facebook unveiled an open source project at the React.js Technical symposium in early 2015. Support for developing iOS and Android native apps with open source JavaScript library react.js. Initially only iOS platform support, the same year September, the Open source project also supports the Android platform.

The principle of react native is to use React abstract OS native UI components in JavaScript instead of DOM elements, such as <View> instead of <DIV> <Image> Replace < Img> and so on.

What are the pros and cons of 2.react-native?

The advantage: the ability to use JavaScript scripts to write the app's interface, and to make a few simple mobile apps for colleagues who work in web development is a benefit. You don't have to learn objective-c and Swift to write a mobile app applet.

Compared to other mobile web frameworks:

Native do not have to WebView, completely rid of the webview unpleasant interaction and performance problems;

Native's native control has a better experience;

Native has better gesture recognition;

The native has a more appropriate threading model;

The downside: It's still in beta, and the potential problems are unknown: compatibility issues, performance issues, and so on. Not a lot of popularization, learning materials are not much, for love toss friends taste fresh.

3. What do you want to learn?

Presumably, we have not been able to resist, will ask questions, using react-native development to learn what?

Html+css+javascript's basic skills must be indispensable;

Node.js The basic concept of learning. API Documentation: https://nodejs.org/dist/v4.2.2/docs/api/

An extension of the jsx:javascript syntax, similar to an XML structure. Https://facebook.github.io/react/docs/jsx-in-depth.html

Flux:facebook a framework for creating user-client Web programs for the company. Https://facebook.github.io/flux/docs/overview.html

Second, the React Native Foundation environment constructs

1. Installation Homebrew

Open Terminal input:

Ruby-e "$ (curl-fssl https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Installation Nvm method

Through the script installation method, execute at the terminal:

curl-o-https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | Bash

Activates the NVM, after the setup script finishes, executes at the terminal:

. ~/.nvm/nvm.sh

3, the default installation of the latest version of the Node.js and set the command line environment variables

NVM Install node && NVM alias default node

You can enter the node command to start the node.js environment

4. Installation Watchman

In the terminal input:

 Brew Install Watchman

Here react native basic environment is completed, recommended frequently run commands tobrew update && brew upgradekeep your program is up to date.

Iii. iOS Development environment

1, the iOS Development environment: (the default reader has installed Xcode7.0 or above version , can not go to the App Store to download)

Use NPM (node Package management tool) to install REACT-NATIVE-CLI (you should pay attention to permissions issues here, and if you are experiencing permissions issues, add sudo before the command below)

NPM install-g REACT-NATIVE-CLI

Initialize the project (do not add sudo in the following statement, the consequences are at your own risk)

React-native Init reactnativeproject (project name)

In the process of initialization, if the progress is slow, it is recommended that you replace the NPM warehouse source with a domestic mirror: (The Wall users please ignore) in the terminal input:

NPM Config Set registry https://registry.npm.taobao.org
npm Config set Disturl https://npm.taobao.org/dist

2, use Xcode to run the debugging program

Find Reactnativeproject file directory

Press and hold the shortcut keyCommand+Shift+G, enter the path in the "Go To Folder" dialog box/Users/yangshebing/ReactNativeProject(yangshebing indicates the computer username, please change it yourself), click Go. Locate the "reactnativeproject.xcodeproj" project file under the iOS folder in the file. As shown in the figure:

Run Reactnativeproject Project

Use Xcode to open the "reactnativeproject.xcodeproj" project file, and hold down the accelerator key "Command+r" to run this project, and then you can see the effect on the emulator when you run successfully.

Edit Index.ios.js File Modify interface

The author edits the Index.ios.js file tool is vim, whenever edits the Index.ios.js file and saves, in the simulator (Simulator), presses theCommand+Rrefreshing interface to see the change effect.

Below we also try to modify the Index.ios.js file slightly:

/**
 * Sample react Native App
 * https://github.com/facebook/react-native
' use strict ';
Import react, {
 appregistry,
 Component,
 StyleSheet,
 //Add image global variable
 image,
 Text,
 View
} from ' react-native ';

Class Reactnativeproject extends Component {
 render () {return
 (
  <view style={styles.container}>
  //Add text show
  <text style={styles.welcome}>
   Belle
  </Text>//
  add Picture Show
  <image 
  source= 
  //Here you need to specify the size of the picture
  style={styles.picture}/>
  </View>
 );

Const STYLES = stylesheet.create ({
 container: {
 flex:1,
 justifycontent: ' Center ',
 alignitems: ' Center ',
 backgroundcolor: ' #F5FCFF ',
 },
 //Here you can set the text font, alignment, etc.
 welcome: {
 fontsize:20,
 textAlign: ' Center ',
 Margin:10,
 },
 //Add picture style, set picture size
 : {
 width:80,
 height:150,
 },
});

Appregistry.registercomponent (' Reactnativeproject ', () => reactnativeproject);

The effect of the refresh is as shown in the following illustration:

True machine Run Debug project

Find the APPDELEGATE.M file in the Reactnativeproject project andlocalhostreplace it with the IP address of your own computer.

Jscodelocation = [Nsurl urlwithstring:@ "Http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

 Jscodelocation = [Nsurl urlwithstring: @http://192.168.31.168:8081/index.ios.bundle?platform=ios&dev=true];

After the replacement is complete, run the program again, at which point the development menu can be summoned by shaking the device.

Disable Development Menu

You need to disable the development menu before you package the submit market. Disable the Development menu method as follows: Open the project, select Product→scheme→edit Scheme, or use the shortcut "Command + <" To select the left Run menu item in the pop-up window. Change the "Build Configuration" setting to "release".

Summarize

Well, see here, if you've successfully configured the react-native environment, and you've created and successfully run the first program. Well, congratulations first, we have not even written a line of code, has successfully run the first React-native program, is not quite simple. In the so-called, a good beginning is half the success. If you have any questions, you can exchange messages.