内容简介:接上一篇类似于Android中的自定义View, 其实就是自定义一个React组件, 用一个class, 后面是组件名字, 继承自React.Component, 里面是一个render方法, 具体代码如下:其实this.props.children指的是标签中间的文字.
接上一篇 ReactNative学习笔记(三)之flexbox 继续学习ReactNative
自定义文本组件
类似于Android中的自定义View, 其实就是自定义一个React组件, 用一个class, 后面是组件名字, 继承自React.Component, 里面是一个render方法, 具体代码如下:
class HeaderText extends Component { render() { return ( <Text style={styles.itemText}> {this.props.children} </Text> ); } }
其实this.props.children指的是标签中间的文字.
然后我们应用这个HeaderText
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <HeaderText> ninghao.net </HeaderText> </View> ); } }
运行看一下效果
可以看到这里面的文字样式就是在HeaderText中定义的styles.itemText样式
Image
Image组件是用来显示图片的, 可以显示本地图像也可以显示网络图像.
首先我们需要引入Image这个组件
import {Platform, StyleSheet, Text, View, Image} from 'react-native';
然后使用Image这个组件并且指定图像的地址
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Image style={styles.image} source={{uri: 'https://img3.doubanio.com/view/photo/l/public/p2191398861.jpg'}}> </Image> </View> ); } }
需要注意的是只有我们设置了图像的宽高, 图片才能显示出来
let styles = StyleSheet.create({ image: { width: 99, height: 138, margin: 6, }, ... });
运行效果
ImageBackground
最新版的ReactNative出了ImageBackground这样一个组件, 并且 不允许在Image组件下放置children了 .我们可以去使用这个ImageBackground组件去显示背景.
首先还是需要先导入
import {Platform, StyleSheet, Text, View, Image, ImageBackground} from 'react-native';
然后在代码中使用
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <ImageBackground style={styles.backgroundImage} source={{uri: 'https://img3.doubanio.com/view/photo/l/public/p2191398861.jpg'}}> <View style={styles.overlay}> <Text style={styles.overlayHeader}> 机器人总动员 </Text> <Text style={styles.overlaySubHeader}> Wall . E ( 2008 ) </Text> </View> </ImageBackground> </View> ); } }
下面是具体的属性值
let styles = StyleSheet.create({ overlay: { backgroundColor: 'rgba(0, 0, 0, 0.1)', alignItems: 'center', }, overlayHeader: { fontSize: 33, fontFamily: 'Helvetica Neue', fontWeight: '200', color: '#eae7ff', padding: 10, }, overlaySubHeader: { fontSize: 16, fontFamily: 'Helvetica Neue', fontWeight: '200', color: '#eae7ff', padding: 10, paddingTop: 0, }, backgroundImage: { flex: 1, resizeMode: 'cover', // contain, stretch(拉伸) }, ... });
rgba表示带透明通道使用rgb表示的颜色.
运行效果:
很漂亮, 不是吗?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- mp-html v2.0.1 已经发布,小程序富文本组件
- UWeb v1.3.3 专业版发布,优化富文本组件上传本地图片功能
- ngx-neditor 1.0.1 发布,更现代化的富文本编辑器 angular 组件
- ngx-neditor 1.0.1 发布,更现代化的富文本编辑器 angular 组件
- 基于标签特定文本表示的文本多标签分类
- 论文浅尝 | 通过文本到文本神经问题生成的机器理解
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。