溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
大家好，今天講一下如何實現自定義標題欄組件，我們都知道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自定義標題欄組件的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
