大家好，今天講一下如何實現自定義標題欄組件，我們都知道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自定義標題欄組件的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
