React Native自定义标题栏组件的实现方法

作者:袖梨 2022-06-25

大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率。

标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要。今天先讲一个不带返回按钮的标题栏。废话少说,直接上代码:

代码如下 复制代码

/**

* 封装公共的标题头,没有返回按钮

*/

'use strict';

import React, { Component } from'react';

import {

Text,

View,

}

from'react-native';

import StyleSheet from'StyleSheet';

exportdefaultclass HeaderNoBack extends Component {

render() {

return(

{this.props.text ||"标题头"}

);

}

}

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';

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

当然,网上资料很多,也可以自己搜索,上面只是代码示例,在实际项目中要根据自己的情况进行修改。

好了,今天先讲到这里,后面部分会讲解带返回按钮的标题栏的实现。

相关文章

精彩推荐