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