React Native自定义标题栏组件

来源：互联网发布：tensorflow入门教程编辑：程序博客网时间：2024/06/05 04:19

大家好，今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提交了开发效率。
标题栏是大多数应用界面必不可少的一部分，将标题栏剥离出来做成一个组件很有必要。今天先讲一个不带返回按钮的标题栏。废话少说，直接上代码:

/** * 封装公共的标题头，没有返回按钮 */'use strict';import React, { Component } from 'react';import {    Text,    View,}from 'react-native';import StyleSheet from 'StyleSheet';export default class HeaderNoBack extends Component {    render() {        return (                <View style={styles.container}>                    <View style={styles.textview}>                        <Text style={styles.textstyle}>{this.props.text || "标题头"}</Text>                    </View>                </View>        );    }}const styles = StyleSheet.create({    container: {        flexDirection: 'row',        alignItems: 'center',        height: 45,        alignSelf: 'stretch',        backgroundColor: '#4a9df8',    },    textview: {        flex: 1,        alignSelf: 'center',    },    textstyle: {        fontSize: 18,        color: '#fff',        textAlign: 'center',    },});

代码比较简单，这里就做过多的分析了，但是着重说一点，this.props.text这里是显示传入进来的要显示的文本，如果没有传入text属性，则默认显示"标题头"。
使用方法示例:

import HeaderNoBack from '../../../component/Header/HeaderNoBack';

<HeaderNoBack text='我是标题'/>

以上代码主要用到了View和Text组件，样式使用了flex布局，有不了解felx布局的可以看下阮一峰的一篇文章:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

当然，网上资料很多，也可以自己搜索，上面只是代码示例，在实际项目中要根据自己的情况进行修改。
好了，今天先讲到这里，后面部分会讲解带返回按钮的标题栏的实现。

0 0