React native build IOS development environment _ios

Source: Internet
Author: User
Tags curl install node


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.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.