On Facebook React Native

This weekend in Upyun's mobile salon, mentioned react Native, write a tutorial today.

The first thing to do is to configure the environment, if not, perform the following work.

1. Install Homebrew Open Terminal

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

2. Install node

Brew Install node

3. Installation

Brew Install Watchman

4. Installation

Brew Install Flow

5. Implementation

NPM install-g REACT-NATIVE-CLI

6. Now the CD to your project location-Awesomeproject This is the file you want to create

React-native Init Awesomeproject

Now run the next emulator

OK to finish.

Now open the JS file to write code.

/** * Sample React Native App * https://github.com/facebook/react-native react-native init FaceMash */' use strict ';//used to turn on s trict mode, let JS work better in this mode var React = require (' react-native ');//Load the React-native module in and assign it to the variable React. Require: This concept can be equivalent to "link library" or "Import library" in Swift. Declare some properties var {appregistry, StyleSheet, Text, View, textinput,//input box image,//picture} = React;var FaceMash = React.cre                                 Ateclass ({getinitialstate () {return{                                                                                             Selectedtab: ' FaceMash ' }}, Render:function () {return (//<vi EW style={styles.container}>//<text style={styles.welcome}>//first time with Ah ....            </text>//</View>//Text input box//<view>//       <textinput//     style = {{height:40,backgroundcolor: ' Gray ', borgerwidth:1}}//onchangetext={(text) =>this.setstate ({input : text})}///>//</View>//Set picture//<view>//&L                                    T;image source={require (' image!my_login_qq ')}/>////</view>// Set View <view style={{backgroundcolor: ' #527FE4 ',padding:100}}> <text style={{fontsize:1                                                            1}}> BLue backgroundcolor </Text> </View>  ); }});//define some styles such as color ah, location ah var styles = stylesheet.create ({container: {flex:1, justifycontent: ' Center ', alignit  EMS: ' Center ', backgroundcolor: ' #F5FCFF ',}, welcome: {fontsize:20, textAlign: ' Center ', Margin:10,}, Instructions: {textAlign: ' center ', Color: ' #333333 ', Marginbottom:5,},}),//appregistry defines the portal for the app,and provides the root component. Appregistry.registercomponent (' FaceMash ', () = FaceMash);

The above is some small demo, you can try under.

Yes, if you want to run a real machine, then you need to switch localhost to the IP address of your computer and run it.

Ok

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

On Facebook React Native