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 父组件与子组件之间的值传递的方法 # React 子组件向父组件传值的方法 # React组件的三种写法总结 # React如何利用相对于根目录进行引用组件详解 # ReactNative Image组件使用详解 # 详解react如何在组件中获取路由参数 # React如何将组件渲染到指定DOM节点详解 # ReactJs实现树形结构的数据显示的组件的示例 # react写一个select组件的实现代码 # react 组件传值的三种方法 # react组件基本用法示例小结 # 自定义 # 小编 # 自己的 # 我是 # 好了 # 在此 # 很有 # 给大家 # 如果没有 # 大家好 # 不了解 # 不带 # 讲到 # 必不可少 # 所述 # 就做 # 少说 # 给我留言 # 中要

返回目录在线咨询

上一篇：EF Core Remove方法怎么用 EF Core删除实体教程
下一篇：如何提高YouTube|视频|的加载速度？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求