脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react native 标题栏

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使用echart绘制地图的案例

    react使用echart绘制地图的案例

    这篇文章主要介绍了react使用echart绘制地图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-01-01
  • 浅谈react-router@4.0 使用方法和源码分析

    浅谈react-router@4.0 使用方法和源码分析

    这篇文章主要介绍了浅谈react-router@4.0 使用方法和源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • React的Props、生命周期详解

    React的Props、生命周期详解

    “Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下
    2024-06-06
  • React JSX深入浅出理解

    React JSX深入浅出理解

    React使用JSX来替代常规的JavaScript。JSX是一个看起来很像 XML的JavaScript语法扩展。我们不需要一定使用 JSX，但它有以下优点：JSX执行更快，因为它在编译为JavaScript代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用JSX编写模板更加简单快速
    2022-12-12
  • React受控组件与非受控组件详细介绍

    React受控组件与非受控组件详细介绍

    具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
    2022-09-09
  • Vite+React+TypeScript手撸TodoList的项目实践

    Vite+React+TypeScript手撸TodoList的项目实践

    本文主要介绍了Vite+React+TypeScript手撸TodoList的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React Native 自定义下拉刷新上拉加载的列表的示例

    React Native 自定义下拉刷新上拉加载的列表的示例

    本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 一个基于react的图片裁剪组件示例

    一个基于react的图片裁剪组件示例

    本篇文章主要介绍了一个基于react的图片裁剪组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React组件的生命周期详解

    React组件的生命周期详解

    React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • react如何同步获取useState的最新状态值

    react如何同步获取useState的最新状态值

    这篇文章主要介绍了react如何同步获取useState的最新状态值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论