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カスタムタイトルバーのコンポーネントの実现方法です。皆さんに何かご迷惑があったらメッセージをください。小编はすぐにご返事します。ここでも私たちのサイトを応援してくれてありがとうございます。