Facebook React Native 初探

標籤：native   facebook   ios   

這周末參加了UPYUN的移動沙龍，就提到了React Native,今天就寫一篇教程。

首先要配置環境，如果沒有就執行下面的工作。

1.安裝Homebrew開啟終端

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

2.安裝node

brew install node

3.安裝

brew install watchman

4.安裝

brew install flow

5.執行

npm install -g react-native-cli

6.現在cd到你工程所處的檔案位置－－AwesomeProject這個就是你要建立的一個檔案

react-native init AwesomeProject

現在運行下模擬器

ok完成。

現在開啟js檔案編寫代碼了。

/** * Sample React Native App * https://github.com/facebook/react-native react-native init FaceMash */'use strict';//用於開啟Strict Mode,讓js在這種模式下更好的工作var React = require('react-native');//將react－native模組載入進來，並將它賦值給變數react。／／require：這個概念可以等同於 Swift 中的“連結庫”或者“匯入庫”。//聲明一些屬性var {  AppRegistry,  StyleSheet,  Text,  View,     TextInput,//輸入框    Image,//圖片} = React;var FaceMash = React.createClass({                                 getInitialState(){                                 return{                                 selectedTab:'faceMash'                                                                                             }                                 },                                   render: function() {    return (//      <View style={styles.container}>//        <Text style={styles.welcome}>//          第一次用啊。。。。//        </Text>//    </View>                                                //文本輸入框//        <View>//            <TextInput//            style = {{height:40,backgroundColor:'gray',borgerWidth:1}}//            onChangeText={(text)=>this.setState({input:text})}//            />//        </View>                        //設定圖片//            <View>//            <Image  source={require('image!my_login_qq')}/>//       //            </View>//                                    //設定view            <View style={{backgroundColor:'#527FE4',padding:100}}>            <Text style={{fontSize:11}}>               BLue backgroundColor            </Text>            </View>                                                            );  }});//定義了一些樣式  比如顏色啊，位置啊var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});//AppRegistry 定義了App的入口，並提供了根組件。AppRegistry.registerComponent('FaceMash', () => FaceMash);

以上是一些小demo，你可以嘗試下。

對了如果你要真機運行那麼需要把localhost換成你電腦的ip地址，然後運行就可以了。

ok

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Facebook React Native 初探