ReactNative学习笔记(四)之自定义文本组件与Image组件

栏目: 服务器 · 发布时间: 7年前

内容简介：接上一篇类似于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表示的颜色.

运行效果:

很漂亮, 不是吗?

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript & jQuery

David Sawyer McFarland / O Reilly / 2011-10-28 / USD 39.99

You don't need programming experience to add interactive and visual effects to your web pages with JavaScript. This Missing Manual shows you how the jQuery library makes JavaScript programming fun, ea......一起来看看《JavaScript & jQuery》这本书的介绍吧!

码农工具

ReactNative学习笔记(四)之自定义文本组件与Image组件

自定义文本组件

Image

ImageBackground

JavaScript & jQuery

JSON 在线解析

HTML 编码/解码

SHA 加密