最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
React Native自定义标题栏组件的实现方法
时间：2022-06-25 14:33:00 编辑：袖梨 来源：一聚教程网
大家好，今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。
标题栏是大多数应用界面必不可少的一部分，将标题栏剥离出来做成一个组件很有必要。今天先讲一个不带返回按钮的标题栏。废话少说，直接上代码:
| 代码如下 | 复制代码 |
/** * 封装公共的标题头，没有返回按钮 */ 'use strict'; import React, { Component } from'react'; import { Text, View, } from'react-native'; import StyleSheet from'StyleSheet'; exportdefaultclass HeaderNoBack extends Component { render() { return(
); } } 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布局的可以看下阮一峰的一篇文章:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
当然，网上资料很多，也可以自己搜索，上面只是代码示例，在实际项目中要根据自己的情况进行修改。
好了，今天先讲到这里，后面部分会讲解带返回按钮的标题栏的实现。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21