React-Native(五):React Native之Text学习
本章节主要学习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学习的更多相关文章
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件解析(二)之Text
React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...
- React Native之React速学教程(下)
概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...
- React Native之React速学教程(中)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- React Native之React速学教程(上)
概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- Native VS React Native VS 微信小程序
随着React Native和 微信小程序的出现,Native一家独大的局面出现裂痕,很多小公司使用已经正在着手微信小程序和React Native了,我公司就已经走上React Native之路.那 ...
- 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 ...
随机推荐
- 重读 必须知道的.NET
1 .public ,对访问成员无限制,属于访问级别最高的权限. protected 访问包含类或者丛类派生类的类. internal 仅限于程序集, protected inernal 访问仅限于 ...
- spring boot高性能实现二维码扫码登录(中)——Redis版
前言 本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...
- 用js编解码base64
以下是编码和解码的方法 function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef ...
- Kotlin——从无到有系列之中级篇(四):面向对象的特征与类(class)继承详解
如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索 QQ群号:497071402 进入正题 在前面的章节中,详 ...
- 配置VIP地址
10.10.10.7 mysql主 redis从 10.10.10.8 mysql从 redis主 现游戏架构如上,游戏后端数据库配置集群.场景描述:若是一台服务器宕机之后,及时切换数据库保持业务 ...
- 移动web开发之rem的使用
为什么要使用rem 移动端设备尺寸五花八门,单纯使用px这个单位无法轻易适配,rem就可以为我们解决这个问题! 如何使用rem 1rem默认等于16px,这是因为页面的默认字体大小就是16px.r 代 ...
- 20162320刘先润第三周Bag类测试
前言 以下内容是本周Bag代码的课后作业,要求是完成伪代码.产品代码和测试代码,为了书写方便我将伪代码以注释的形式写在了产品代码的后面 测试步骤 1.首先对Bag类引用BagInterface的代码进 ...
- 实验MyOD
实验MyOD 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 提交测试代码和运行结果截图,加上学号水印,提交码云代码链接. 代码如下: (刚开始 ...
- transient 与 volatile 笔记
1. transient 词义:瞬间的,短暂的 首先说说"序列化",把一个对象的表示转化为字节流的过程称为串行化(也称为序列化,serialization),从字节流中把对象重建出 ...
- 第201621123043 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 系统还在创建中..... 为了让你 ...