关于React Native的介绍,省略……
关于环境的搭建,省略……
…………
进入正题(ES6语法)
React Native 总览
React Native 组件
例如:ListView、Image 、MapView、 Picker、 Slider、 text、 view ……
导入所需的组件
<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的方法创建一个类。里面的render方法就是渲染视图用的
var HelloWorld = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
React-Native入门学习
</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是视图的一个属性,styles是我们定义的样式表,container是样式表中的一个样式
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,
}
});
注册应用的入口
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);