關(guān)于React Native的介紹润绎，省略……
關(guān)于環(huán)境的搭建斜棚，省略……
…………
進(jìn)入正題（ES6語(yǔ)法）
React Native 總覽
React Native 組件
例如：ListView、Image 蒂教、MapView垢啼、 Picker、 Slider熏挎、 text、 view ……
導(dǎo)入所需的組件
<View style={{flex:1,backgroundColor:'white'}}}>
<NavBar onBackPressed={this.onBackPress}/>
</View>
import React, {Component} from 'react';
import {
NavigatorIOS,
ListView,
TextInput,
WebView,
TouchableOpacity,
AppRegistry,
StyleSheet,
Image,
Text,
View
} from 'react-native';
React提供了React.createClass的方法創(chuàng)建一個(gè)類晌砾。里面的render方法就是渲染視圖用的
var HelloWorld = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
React-Native入門學(xué)習(xí)
</Text>
<Image style={styles.pic} source={{uri: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}}>
</Image>
</View>
);
}
});
我們需要提供視圖的樣式坎拐，那么StyleSheet.create就是干這件事的,style={styles.container},其中style是視圖的一個(gè)屬性，styles是我們定義的樣式表，container是樣式表中的一個(gè)樣式
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
},
pic: {
width:100,
height:100,
}
});
注冊(cè)應(yīng)用的入口
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
