React Native自定义标题栏组件的实现方法
程序员文章站
2024-02-15 08:46:52
大家好,今天讲一下如何实现自定义标题栏组件,我们都知道rn有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率。
标...
大家好,今天讲一下如何实现自定义标题栏组件,我们都知道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布局的可以看下阮一峰的一篇文章:
当然,网上资料很多,也可以自己搜索,上面只是代码示例,在实际项目中要根据自己的情况进行修改。
好了,今天先讲到这里,后面部分会讲解带返回按钮的标题栏的实现。
以上所述是小编给大家介绍的react native自定义标题栏组件的实现方法,希望对大家有所帮助
上一篇: 数组针对某项的求和问题
下一篇: 升级可能导致数据库不可用[待看]