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

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

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

运行效果:

很漂亮, 不是吗?

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

查看所有标签

猜你喜欢:

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

码农书籍

函数式算法设计珠玑

Richard Bird / 苏统华、孙芳媛、郝文超、徐琴 / 机械工业出版社 / 2017-4-1 / 69.00

本书采用完全崭新的方式介绍算法设计。全书由30个珠玑构成，每个珠玑单独列为一章，用于解决一个特定编程问题。这些问题的出处五花八门，有的来自游戏或拼图，有的是有趣的组合任务，还有的是散落于数据压缩及字串匹配等领域的更为熟悉的算法。每个珠玑以使用函数式编程语言Haskell对问题进行描述作为开始，每个解答均是诉诸于函数式编程法则从问题表述中计算得到。本书适用于那些喜欢学习算法设计思想的函数式编程人员、......一起来看看《函数式算法设计珠玑》这本书的介绍吧!

码农工具