快捷導(dǎo)航

React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法

更新時(shí)間：2017年01月25日 11:48:39 作者：點(diǎn)石為金

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

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

標(biāo)題欄是大多數(shù)應(yīng)用界面必不可少的一部分，將標(biāo)題欄剝離出來(lái)做成一個(gè)組件很有必要。今天先講一個(gè)不帶返回按鈕的標(biāo)題欄。廢話少說(shuō)，直接上代碼:

/** 
 * 封裝公共的標(biāo)題頭，沒(méi)有返回按鈕 
 */ 
'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 || "標(biāo)題頭"}</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', 
 }, 
});

代碼比較簡(jiǎn)單，這里就做過(guò)多的分析了，但是著重說(shuō)一點(diǎn)，this.props.text這里是顯示傳入進(jìn)來(lái)的要顯示的文本，如果沒(méi)有傳入text屬性，則默認(rèn)顯示"標(biāo)題頭"。

使用方法示例:

import HeaderNoBack from '../../../component/Header/HeaderNoBack'; 
<HeaderNoBack text='我是標(biāo)題'/>

以上代碼主要用到了View和Text組件，樣式使用了flex布局，有不了解felx布局的可以看下阮一峰的一篇文章:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

當(dāng)然，網(wǎng)上資料很多，也可以自己搜索，上面只是代碼示例，在實(shí)際項(xiàng)目中要根據(jù)自己的情況進(jìn)行修改。

好了，今天先講到這里，后面部分會(huì)講解帶返回按鈕的標(biāo)題欄的實(shí)現(xiàn)。

以上所述是小編給大家介紹的React Native自定義標(biāo)題欄組件的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

react使用echart繪制地圖的案例
這篇文章主要介紹了react使用echart繪制地圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
淺談react-router@4.0 使用方法和源碼分析
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
React的Props、生命周期詳解
“Props” 是 React 中用于傳遞數(shù)據(jù)給組件的一種機(jī)制,通常作為組件的參數(shù)進(jìn)行傳遞,在 React 中,props 是只讀的,意味著一旦將數(shù)據(jù)傳遞給組件的 props,組件就不能直接修改這些 props 的值,這篇文章主要介紹了React的Props、生命周期,需要的朋友可以參考下
2024-06-06
React?JSX深入淺出理解
React使用JSX來(lái)替代常規(guī)的JavaScript。JSX是一個(gè)看起來(lái)很像 XML的JavaScript語(yǔ)法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫模板更加簡(jiǎn)單快速
2022-12-12
React受控組件與非受控組件詳細(xì)介紹
具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。下面就說(shuō)說(shuō)這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2022-09-09
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
一個(gè)基于react的圖片裁剪組件示例
本篇文章主要介紹了一個(gè)基于react的圖片裁剪組件示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
React組件的生命周期詳解
React是用于構(gòu)建用戶界面的JavaScript庫(kù)。本文詳細(xì)講解了React的生命周期，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03
react如何同步獲取useState的最新?tīng)顟B(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新?tīng)顟B(tài)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01