（二）React Native中View和Text组件的使用
前言前段时间实在太忙，由于刚进公司，第一个项目要用混合开发，这种开发模式自己也没用过，期间遇见过与h5的各种奇葩问题，并且Android这端都是由自己负责，经过两个月的努力，公司项目终于上线。加之后面又回了一趟学校答辩，才把事情忙完了。这期间一直没时间好好学习RN，到现在才有时间学习。 这篇文章打算介绍下RN中的View和Text组件。 View在RN中View类似html中的div组件，它支持多层嵌套，支持flexbox布局。 看下代码： //index.android,js代码
import React from 'react';
import {
AppRegistry,} from 'react-native';
import myView from './demo/2.view'
AppRegistry.registerComponent('chen',() => myView);
//view.js代码
import React,{Component} from 'react';
import {
StyleSheet,View,Text,PixelRatio
} from 'react-native';
class MyView extends Component {
render(){
return(
<View style={styles.container}>
<View style={[styles.item, styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style={[styles.item, styles.lineLeftRight]}>
<View style={[styles.center, styles.flex,styles.lineCenter]}>
<Text style={[styles.font]}>海外酒店</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={[styles.font]}>特惠酒店</Text>
</View>
</View>
<View style={[styles.item]}>
<View style={[styles.center,styles.lineCenter]}>
<Text style={[styles.font]}>团购</Text>
</View>
<View style={[styles.center, styles.flex]}>
<Text style={[styles.font]}>客栈，公寓</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},container:{
marginTop:200,marginLeft:5,marginRight:5,height:84,borderWidth:1,backgroundColor:'#FF0067',flexDirection:'row',borderRadius:5
},item:{
flex:1,height:80,},center:{
justifyContent:'center',alignItems:'center'
},lineLeftRight:{
borderLeftWidth:1/PixelRatio.get(),borderRightWidth:1/PixelRatio.get(),borderColor:'#fff'
},font:{
color:'#fff',fontSize:16,fontWeight:'bold',lineCenter:{
borderColor:'#fff',borderBottomWidth:1/PixelRatio.get(),}
});
module.exports = MyView;
看下实现效果 简单分析下代码： index.android.js是android端的入口文件，该文件中加载了一个myView组件，AppRegistry.registerComponent(‘chen’,() => myView); 用来注册该组件，’chen’引号里面的字符串是项目名。而组件myView里面真正用来展示界面，这就是组件化实现思想，其中myView有几个Style属性应该被记录下： flex： 是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第一个后面的参数为可选参数，默认值为：0 1 auto。这个属性和Android的weight属性类似。 justifyContent： 用来定义伸缩项目在水平轴的对齐方式 alignItems： 用来定义伸缩项目在交叉轴上的对齐方式，语法为： PixelRatio.get()： 用来实现多手机的适配的。 TextText组件主要用于显示文本；具有响应性，可以嵌套，可以继承样式 Text组件的特性： 看下代码： import React,{Component} from 'react';
import {
StyleSheet,Text
}from 'react-native';
import Header from './3.header'
class MyText extends Component{
render(){
return(
<View style={styles.flex}>
<Header></Header>
<List title='一线城市楼市退烧 有房源一夜跌价160万'></List>
<List title='上海市民称墓地太贵买不起 买房存骨灰'></List>
<List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List>
<List title='生活大爆炸人物原型都好牛逼'></List>
<ImportantNews
news={[
'解放军报报社大楼正在拆除 标识已被卸下(图)','韩国停签东三省52家旅行社 或为阻止朝旅游创汇','南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻','防总部署长江防汛:以防御98年量级大洪水为目标'
]}>
</ImportantNews>
</View>
);
}
}
class List extends Component{
render(){
return(
<View style={styles.list_item}>
<Text style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
}
class ImportantNews extends Component{
show(title){
alert(title);
}
render(){
var news=[];
for(var i in this.props.news){
var text = (
<Text
onPress={this.show.bind(this,this.props.news[i])}
numberOfLines={2}
style={styles.news_item}
key={i}
>
{this.props.news[i]}</Text>
);
news.push(text);
}
return(
<View style={styles.flex}>
<Text style={styles.news_title}></Text>
{news}
</View>
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},list_item:{
height:40,marginLeft:10,marginRight:10,borderBottomWidth:1,borderBottomColor:'#ddd',justifyContent:'center',list_item_font:{
fontSize:16,news_item:{
marginLeft:10,fontSize:15,lineHeight:40,});
module.exports = MyText
效果图展示： 组件加载部分就不展示了， 从代码中我们可以看出，页面的展示都是以组件化的思想展示的，各自的模块都是独立的，这种思想是值得我们在任意的开发中值得学习的。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |