Facebook React Native 初探

这周末参加了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