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自定义标题栏组件的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• 详解React Native开源时间日期选择器组件(react-native-datetime)
• ReactNative Image组件使用详解
• React-Native 组件之 Modal的使用详解
• react-native-tab-navigator组件的基本使用示例代码
• React-Native中一些常用组件的用法详解(一)
• react-native中ListView组件点击跳转的方法示例
• React-Native TextInput组件详解及实例代码
• 详解React native全局变量的使用(跨组件的通信)
• React Native中导航组件react-navigation跨tab路由处理详解
• React Native自定义组件与输出方法详解