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自定義標題欄組件的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對本站網站的支持！