React Native自定義標題欄組件的實現方法

更新時間：2017年01月25日 11:48:39 作者：點石為金

今天講一下如何實現自定義標題欄組件，我們都知道RN有一個優(yōu)點就是可以組件化，在需要使用該組件的地方直接引用并傳遞一些參數就可以了，這種方式確實提高了開發(fā)效率。對React Native自定義標題欄組件的實現方法感興趣的朋友參考下

大家好，今天講一下如何實現自定義標題欄組件，我們都知道RN有一個優(yōu)點就是可以組件化，在需要使用該組件的地方直接引用并傳遞一些參數就可以了，這種方式確實提高了開發(fā)效率。

標題欄是大多數應用界面必不可少的一部分，將標題欄剝離出來做成一個組件很有必要。今天先講一個不帶返回按鈕的標題欄。廢話少說，直接上代碼:

/** 
 * 封裝公共的標題頭，沒有返回按鈕 
 */ 
'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-router-dom v6版本實現Tabs路由緩存切換功能
今天有人問我怎么實現React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現,v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現Tabs路由緩存切換,感興趣的朋友一起看看吧
2023-10-10
JavaScript中React 面向組件編程（下）
在React面向組件編程中，除了上一章節(jié)的組件實例的三大核心屬性以外，還有很多重要的內容比如：React 的生命周期，受控組件與非受控組件，高階函數和函數柯里化的理解等，在本文中會給大家繼續(xù)講解React 面向組件編程中剩余的內容
2023-03-03
react實現瀏覽器自動刷新的示例代碼
這篇文章主要介紹了react實現瀏覽器自動刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
React-Native TextInput組件詳解及實例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實例代碼的相關資料,需要的朋友可以參考下
2016-10-10
react ant protable自定義實現搜索下拉框
這篇文章主要介紹了react ant protable自定義實現搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
React 使用recharts實現散點地圖的示例代碼
這篇文章主要介紹了React 使用recharts實現散點地圖的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
antd4里table滾動的實現
本文主要介紹了antd4里table滾動的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-03-03
利用CDN加速react webpack打包后的文件詳解
下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
React中使用Workbox進行預緩存的實現代碼
Workbox是Google Chrome團隊推出的一套 PWA 的解決方案,這套解決方案當中包含了核心庫和構建工具,因此我們可以利用Workbox實現Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進行預緩存的實現,需要的朋友可以參考下
2023-11-11