React Native自定义标题栏组件的实现方法
更新时间：2017年01月25日 11:48:39 作者：点石为金
今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。对React Native自定义标题栏组件的实现方法感兴趣的朋友参考下
大家好，今天讲一下如何实现自定义标题栏组件，我们都知道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
当然，网上资料很多，也可以自己搜索，上面只是代码示例，在实际项目中要根据自己的情况进行修改。
好了，今天先讲到这里，后面部分会讲解带返回按钮的标题栏的实现。
以上所述是小编给大家介绍的React Native自定义标题栏组件的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
jsx就是javsscript与xml结合的一种格式，是js语法的一种扩展，只要把html代码写在js中就是jsx。react中定义组件有3种写法：函数的方式、es5的写法、es6（类）的写法2022-08-08
react凭借virtual DOM和diff算法拥有高效的性能，除此之外也有很多其他的方法和技巧可以进一步提升react性能，在本文中我将列举出可有效提升react性能的几种方法，帮助我们改进react代码，提升性能2023-01-01
这篇文章主要给大家介绍了关于react-router实现跳转传值的相关资料，文中给出了详细的示例代码，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-05-05
这篇文章主要为大家详细介绍了使用React组件编写温度显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
本篇文章主要介绍了浅谈React 服务器端渲染的使用，React是最受欢迎的客户端 JavaScript 框架，在本教程中，我们将逐步向您介绍服务器端的渲染示例2018-05-05
在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要为大家介绍了React 状态管理工具优劣势示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了react配置px转换rem的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
在使用React Native开发的时，当我们快速滑动应用的时候，可能会出现误触，导致我们会点击到页面中的某一些点击事件，误触导致页面元素响应从而进行其他操作,表现出非常不好的用户体验。2023-05-05
这篇文章主要介绍了React Hook四种组件优化总结，文章围绕主题展开详细的内容介绍，具有一定的参考价孩子，需要的朋友可以参考一下2022-07-07
最新评论