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

相关文章

  • React如何实现浏览器打印部分内容详析

    React如何实现浏览器打印部分内容详析

    这篇文章主要给大家介绍了关于利用React如何实现浏览器打印部分内容的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用React具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • react native 原生模块桥接的简单说明小结

    react native 原生模块桥接的简单说明小结

    这篇文章主要介绍了react native 原生模块桥接的简单说明小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • react-native封装插件swiper的使用方法

    react-native封装插件swiper的使用方法

    这篇文章主要介绍了react-native封装插件swiper的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React Native 图片查看组件的方法

    React Native 图片查看组件的方法

    这篇文章主要介绍了React Native 图片查看组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • React复制到剪贴板的示例代码

    React复制到剪贴板的示例代码

    本篇文章主要介绍了React复制到剪贴板的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React项目动态设置title标题的方法示例

    React项目动态设置title标题的方法示例

    这篇文章主要介绍了React项目动态设置title标题的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 记React connect的几种写法(小结)

    记React connect的几种写法(小结)

    这篇文章主要介绍了记React connect的几种写法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解在React里使用

    详解在React里使用"Vuex"

    本篇文章主要介绍了详解在React里使用"Vuex",小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Hooks常用场景的使用(小结)

    React Hooks常用场景的使用(小结)

    这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下
    2021-04-04
  • React-Native TextInput组件详解及实例代码

    React-Native TextInput组件详解及实例代码

    这篇文章主要介绍了React-Native TextInput组件详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论