本章节主要学习Text的布局,仿照网易新网:

代码:

 /**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Text,
View
} from 'react-native'; const Header=require('./header'); export default class HelloWord extends Component {
render() {
return (
<View style={styles.body}>
<Header></Header>
<HotNews title='火箭军今起换发新军服 衬衣为国际经典色'></HotNews>
<HotNews title='身份证现可异地办理 微信发红包需经认证'></HotNews>
<HotNews title='传军队师职干部工资将达3万 国防部澄清'></HotNews>
<HotNews title=''></HotNews>
<ImportantNews news={['王儒林不再任山西省委书记:愉快服从组织安排',
'土耳其警方逮捕22名机场袭击事件嫌疑人',
'外媒:8名在中国丹东工作朝鲜女员工集体出逃',
'"连云港电大女生被辱"续:施暴者曾遭校园暴力,该事件是一个社会问题引起了广大人民的关注',
'北京检察院依法告知和公布雷洋尸检鉴定意见',
'媒体:这5次大会上领导人曾讲了不少狠话',
'埃航客机黑匣子获修复 客机可能曾起火燃烧']}></ImportantNews>
</View>
);
}
} class ImportantNews extends Component{
show(title){
alert(title)
}
render(){
var news=[];
for(var i in this.props.news){
var text=(
<Text
key={i}
onPress={this.show.bind(this,this.props.news[i])}
numberOfLines={1}
style={styles.news_item}>{this.props.news[i]}</Text>
);
news.push(text);
} return (
<View style={styles.flex}>
<Text style={styles.news_title}>今日要闻</Text>
{news}
</View>
);
}
} class HotNews extends Component{
render(){
return (
<View style={styles.list_item}>
<Text style={styles.list_item_font}>{this.props.title}</Text>
</View>
);
}
} const styles = StyleSheet.create({
body:{
flex:1,
},
list_item:{
height:40,
marginLeft:10,
marginRight:10,
borderBottomWidth:1,
borderBottomColor:'#ddd',
justifyContent:'center',
},
list_item_font:{
fontSize:16,
},
news_title:{
fontSize:20,
fontWeight:'bold',
color:'#CD1D1C',
marginLeft:10,
marginRight:15,
},
news_item:{
marginLeft:10,
marginRight:10,
fontSize:16,
lineHeight:40,
borderBottomWidth:1,
borderBottomColor:'#ddd',
justifyContent:'center',
},
}); AppRegistry.registerComponent('HelloWord', () => HelloWord);

呈现效果:

点击“今日要闻”下的新闻title弹出框效果:

修改numberOfLine属性:

numberOfLines={2}

修改为2后布局效果:

React-Native(五):React Native之Text学习的更多相关文章

  1. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  2. React Native组件(三)Text组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...

  3. React Native组件解析(二)之Text

    React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...

  4. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  5. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  6. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  7. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  8. Native VS React Native VS 微信小程序

    随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...

  9. React Native & react-native-web-player & React Native for Web

    React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...

随机推荐

  1. 想在网上保持匿名?教你用Linux如何实现!

    想在网上保持匿名?教你用Linux如何实现! 信息时代给我们的生活带来极大便利和好处的同时也带来了很大的风险.一方面,人们只要点击几下按钮,就能基本上访问已知存在的全部信息和知识:另一方面,要是这种权 ...

  2. 笔记:Maven 仓库及配置详解

    本地创建默认路径在 用户目录\.m2\repository,如果需要自定义本地创建目录地址,可以编辑文件 用户目录\.m2\settings.xml(文件不存在,则需要从Maven安装目录的Conf目 ...

  3. Docker + webpack 打包前端项目

    码云代码地址: https://gitee.com/caonimashi/docker_deployment_front_end    构建基础镜像: 1.下载一个 Apline Linux 操作系统 ...

  4. TCP为什么不是两次握手而是三次?

    为什么不采用两次握手?如果是两次握手的情景:客户端在发送一个连接建立请求之后进入等待状态,等到服务端确认之后就进入established状态.服务端在发送一个确认连接建立请求报文之后(不管客户端是否有 ...

  5. Notepad++中实现Markdown语法高亮与实时预览

    Notepad ++是一个十分强大的编辑器,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Notepad ++不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的 ...

  6. servlet3.0注解loadOnStartup不起作用解决方案

    多次尝试3.0在源码中直接用注解配置loadOnStartup=1,即web应用启动时创建servlet实例,发现不起作用,但是在web.xml配置则可以正常运行.先上源码. package lee; ...

  7. JavaScript判断类型

    1.typeof操作符,返回值为字符串,用来判断一个值是哪种基本类型 "undefined"-Undefined "boolean"-Boolean " ...

  8. C语言最后一次博客作业

    1.当初你是如何做出选择计算机专业的决定的? 一开始选专业的时候,说实话我很纠结也很迷茫,对我来说,中学时代,似乎就只要考好试,做好题就可以了,对于未来想要做啥并没有那么多的规划和想法,偶尔跟基友畅聊 ...

  9. Flask 应用最佳实践

    一个好的应用目录结构可以方便代码的管理和维护,一个好的应用管理维护方式也可以强化程序的可扩展性 应用目录结构 假定我们的应用主目录是"flask-demo",首先我们建议每个应用都 ...

  10. Linux基础常用命令

    Linux 下命令有很多,并且很多命令用法又有不同的选项,这里介绍一些常用的最基本的Linux命令的用法,希望给大家留下便利之处. 1.cd 切换目录.例如 cd /home 可切换到home目录,  ...