React Native自定義標題欄組件的實現(xiàn)方法
大家好，今天講一下如何實現(xiàn)自定義標題欄組件，我們都知道RN有一個優(yōu)點就是可以組件化，在需要使用該組件的地方直接引用并傳遞一些參數(shù)就可以了，這種方式確實提高了開發(fā)效率。
標題欄是大多數(shù)應用界面必不可少的一部分，將標題欄剝離出來做成一個組件很有必要。今天先講一個不帶返回按鈕的標題欄。廢話少說，直接上代碼:
/**
* 封裝公共的標題頭，沒有返回按鈕
*/
'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
當然，網(wǎng)上資料很多，也可以自己搜索，上面只是代碼示例，在實際項目中要根據(jù)自己的情況進行修改。
好了，今天先講到這里，后面部分會講解帶返回按鈕的標題欄的實現(xiàn)。
以上所述是小編給大家介紹的React Native自定義標題欄組件的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實現(xiàn)React-Router-dom類似標簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
在React面向組件編程中，除了上一章節(jié)的組件實例的三大核心屬性以外，還有很多重要的內容比如：React 的生命周期，受控組件與非受控組件，高階函數(shù)和函數(shù)柯里化的理解等，在本文中會給大家繼續(xù)講解React 面向組件編程中剩余的內容2023-03-03
這篇文章主要介紹了react實現(xiàn)瀏覽器自動刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
React-Native TextInput組件詳解及實例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實例代碼的相關資料,需要的朋友可以參考下2016-10-10
react ant protable自定義實現(xiàn)搜索下拉框
這篇文章主要介紹了react ant protable自定義實現(xiàn)搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React 使用recharts實現(xiàn)散點地圖的示例代碼
這篇文章主要介紹了React 使用recharts實現(xiàn)散點地圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了antd4里table滾動的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
下面小編就為大家分享一篇利用CDN加速react webpack打包后的文件詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React中使用Workbox進行預緩存的實現(xiàn)代碼
Workbox是Google Chrome團隊推出的一套 PWA 的解決方案,這套解決方案當中包含了核心庫和構建工具,因此我們可以利用Workbox實現(xiàn)Service Worker的快速開發(fā),本文小編給大家介紹了React中使用Workbox進行預緩存的實現(xiàn),需要的朋友可以參考下2023-11-11